Popovers z Bootstrap z szablonem ember.js

Question

Próbuję użyć Bootstrap Popover z EmberJS, tak aby zawartość popover będzie szablonem ember/handlebars (z wiązaniem itp.). Jak to zrobić? (Ember 1.0.0-RC2)

Answer 1

Oto przykład działa na popover Ember bootstrap (patrz http://jsfiddle.net/72fSd/):

App.Popover = Ember.View.extend({ 
     parentSelector: '', 
     contentSelector: '', 
     didInsertElement: function() { 
      var self = this; 
      $(self.parentSelector).popover({ 
       html: true, 
       content: function() { 
        var $content = $(self.contentSelector); 
        return $content.html(); 
       } 
      }); 
     } 

instancję widok:

{{view App.Popover templateName="my-popover-content" parentSelector=".popoverButton" contentSelector="#popovercontent"}} 

Tutaj parentSelector może np. wybierz przycisk. Upewnij się, że masz kontener div z identyfikatorem #popovercontent w szablonie treści my-popover, aby zadziałał komponent contentSelector. Oczywiście musisz załadować szablon przed inicjalizacją widoku.

Wiązanie dwustronne powinno działać z tym rozwiązaniem.

Answer 2

ex jeśli chcesz popup obraz zrobić coś takiego w wyświetlać

imgTag: '<img src="smiley.gif" alt="Smiley face" height="42" width="42">', 

didInsertElement: function() { 
    var self = this; 
    Ember.run.schedule('actions', this, function() { 
     self.$().popover({ 
      title: 'Smile!!!', 
      html: true, 
      content: self.get('imgTag'), 
      placement: 'bottom', 
      trigger: 'hover' 
     }); 
    }); 
}, 

willDestroyElement: function() { 
    this.$().popover('destroy'); 
} 

Answer 3

Wpadłem też na ten problem i miałem ten sam problem, o którym wspomniał Robert, gdzie akceptowalne rozwiązanie po prostu nie pasuje do bardziej skomplikowanych scenariuszy.

Wpadłem na bardzo elegancką poprawkę, ale nie jestem pewien, czy jest ona przyjazna w przyszłości. Biorę wykorzystać renderToBuffer funkcji - patrz poniżej:

//make your popover view to be created later 
App.PopoverView = Ember.View.extend({ 
    templateName : 'name-of-your-template-with-content' 
}); 

//then you make your link that will trigger the popover 
App.PopoverLinkView = Ember.View.extend({ 

    tagName : 'a', 

    didInsertElement : function(){ 

    var that = this; 

    this.$().popover({ 
    'html' : true, 
    'content' : function(el){ 
    var detailView = App.PopoverView.create(); 
    var html = detailView.renderToBuffer().buffer; 
    return html; 
    } 
    }); 

    } 

}); 

Zaletą jest to, że można przekazać w modelu i dokonać rzeczy dynamiczne. Nie testowałem tego dokładnie, ale chciałem to zrobić, aby potencjalnie pomóc innym.

Answer 4

Wziąłem odpowiedź Roberta powyżej nieco dalej. Stworzyłem komponent, a także po prostu używam elementu jQuery dla treści zamiast wywoływania .html(). (To łagodzi problem konieczności zduplikowane identyfikatory na stronie.)

App.CustomPopoverComponent = Ember.Component.extend({ 
    tagName: 'button', 
    classNames: 'btn btn-default', 
    type: 'button', 
    popoverContentSelector: '', 
    didInsertElement: function() { 
    var component = this, 
     contents = $(component.get('popoverContentSelector')); 

    component.$().popover({ 
     placement: 'bottom', 
     html: true, 
     content: contents 
    }).on('show.bs.popover', function() { 
     contents.removeClass('hide'); 
    }); 
    }, 
    willDestroyElement: function() { 
    this.$().popover('destroy'); 
    } 
}); 

użyłem klasy Bootstrap za „hide”, aby ukryć zawartość początkowo. Następnie usunąłem klasę "ukryj" po raz pierwszy do pokazu. Od tego momentu wszystko działa zgodnie z oczekiwaniami.

To jak używać komponentu w szablonie kierownicy:

{{#custom-popover popoverContentSelector='.popoverContents'}} 
    Popover Button 
    {{/custom-popover}} 

Answer 5

Wziąłem odpowiedź Terry'ego nieco dalej i myśleć mam wymyślić proste, ogólne rozwiązanie tego problemu.

stworzyłem składnik bootstrap-popover tak:

App.BootstrapPopoverComponent = Ember.Component.extend({ 
    tagName: 'div',  //whatever default you want... div is default anyway here 
    classNames: '',  //whatever default you want 
    placement: 'bottom', //whatever default you want 
    didInsertElement: function() { 
    var component = this, 
     contents = this.$('.popoverJs'); 
    component.$().popover({ 
     animation: false, 
     placement: component.get('placement'), 
     html: true, 
     content: contents 
    }).on('show.bs.popover', function() { 
     contents.removeClass('hide'); 
    }); 
    }, 
    willDestroyElement: function() { 
    this.$().popover('destroy'); 
    } 
}); 

Oto związane szablon:

<script type="text/x-handlebars" id="components/bootstrap-popover"> 
    {{title}} 
    <div class="popoverJs hide"> 
    {{yield}} 
    </div> 
</script> 

Uwaga korzystanie z „ukryć” klasy ukryć uzyskane zawartość początkowo. Ta klasa to po prostu "display: none". Bez tego rzeczy nie będą działać tak, jak byś miał nadzieję.

Kiedy już, że można po prostu zrobić coś jak to zrobić, gdy chcesz popover:

{{#bootstrap-popover title="My Fancy Popover" tagName="button"}} 
    <ul> 
     <li>my</li> 
     <li>awesome</li> 
     <li>popover</li> 
     <li>contents</li> 
     <li>example</li> 
    </ul> 
    {{/bootstrap-popover}} 

Zawartość powinien móc być cokolwiek chcesz - dowolną HTML, renderowania komponentu lub częściowe itp. Oczywiście, możesz podać inne nazwy tagów, nazwy klas, tytuł, miejsce docelowe itd. według własnego uznania.

Mam nadzieję, że to rozwiązanie pomoże.