How to use Sproutcore 2.0 with Twitter bootstrap dropdown menu

Question

I create topbar menu using twitter-bootstrap and It working fine

.topbar
  .topbar-inner
    .container-fluid
      {{#view Mediawrap.menuView id="menuView"}}
      = link_to 'Mediawrap', root_path, {:class=>"brand"}
      %ul.nav
        %li.menu
          = link_to 'Search', "#", {:class=>"menu"}
          %ul.menu-dropdown
            %li
              = link_to "Hide date search", "#"
            %li
              = link_to "Hide index search", "#"
            %li
              = link_to "Hide advance search", "#"
            %li
              = link_to "Clear search", "#"
            %li.divider
            %li
              = link_to 'Save to new folder ...', "#"
            %li
              = link_to 'Replace a folder', "#"
      {{/view}}

until I try to add Sproutcore to page. My dropdown are stop working. I think It's because "$(document).ready(function()" is calling before Sproutcore generate HTML tag.

$(document).ready(function() {
  alert("bank");
  $(".topbar").dropdown();
});

How do I call command in document.ready after sproutcore finished generate HTML tag

Answer 1

You might also try using a ready callback inside your application:

App = SC.Application.create({
  ready: function() {
    this._super();
    $(".topbar").dropdown();
  }
});

I think it's a mistake that you have to call this._super() here, and will fix it soon.

Answer 2

Call Twitter Bootstrap script after generate Sproutcore by "didInsertElement" call back

Mediawrap.menuView = SC.View.extend({
  color: 'blue',

  didInsertElement: function() {
    this._super();
    $(".topbar").dropdown();
  }
})

"didInsertElement" < is not in online document but you can generate it by your self