Bootstrap Popovers mit ember.js Vorlage

Question

Ich versuche Bootstrap Popover mit EmberJS zu verwenden, so dass der Inhalt des Popover eine Ember/Lenker Vorlage (mit Bindung usw.) sein wird. Wie kann das gemacht werden? (Ember 1.0.0-RC2)

Answer 1

Hier ist ein funktionierendes Beispiel für einen ember Bootstrap popover (siehe 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(); 
       } 
      }); 
     } 

Instantiate die Ansicht:

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

Hier parentSelector könnte z.B. Wähle eine Schaltfläche aus. Stellen Sie sicher, dass Sie einen div-Container mit der ID #popovercontent in Ihrer Vorlage für mein Popover-Content haben, damit der contentSelector funktioniert. Natürlich müssen Sie die Vorlage vor der Initialisierung der Ansicht laden.

Zwei-Wege-Bindung sollte mit dieser Lösung arbeiten.

Answer 2

ab, wenn Sie ein Bild tun, so etwas Popup mögen Sie sehen

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

Ich lief auch in dieses Problem und hatte das gleiche Problem Robert oben erwähnt, wo die akzeptable Lösung einfach nicht zu komplizierteren Szenarien gut skalieren.

Ich lief in eine sehr elegante Lösung, aber ich bin mir nicht sicher, wie zukunftsfähig es ist. Ich nehme die Vorteile der Funktion renderToBuffer - siehe unten:

//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; 
    } 
    }); 

    } 

}); 

Der Vorteil hierbei ist, dass Sie in einem Modell passieren können und die Dinge dynamisch machen. Ich habe es nicht gründlich getestet, aber ich wollte es da draußen haben, um anderen zu helfen.

Answer 4

Ich nahm Roberts Antwort ein wenig weiter oben. Ich habe eine Komponente erstellt und verwende auch nur das jQuery-Element für den Inhalt, anstatt html() aufzurufen. (Dies mildert das Problem der in der Seite dupliziert IDs haben.)

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'); 
    } 
}); 

I verwendet Bootstrap des ‚verstecken‘ Klasse den Inhalt zunächst zu verbergen. Dann habe ich die 'hide'-Klasse das erste Mal entfernt, bis das Popover angezeigt wird. Von nun an läuft alles wie erwartet.

Dies ist, wie die Komponente in Ihrem Lenker Vorlage zu verwenden:

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

Answer 5

Ich habe ein bisschen weiter Terrys Antwort und ich denke, mit einer einfachen, allgemeinen Lösung für dieses Problem habe kommen.

habe ich eine Bootstrap-popover Komponente wie folgt:

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

Beachten Sie die Verwendung der „verstecken“ Klasse zunächst die ergab Inhalt zu verbergen:

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'); 
    } 
}); 

Hier die zugehörige Vorlage ist. Diese Klasse ist einfach "display: none". Ohne dies werden die Dinge nicht so funktionieren, wie Sie es erwarten würden.

Sobald Sie, dass, können Sie einfach tun, so etwas zu tun, wenn Sie eine popover wollen:

{{#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}} 

Der Inhalt der Lage sein sollte, was Sie wollen - jede beliebige HTML, eine Komponente Rendering oder Teilweise, etc .. Natürlich können Sie andere TagNames, ClassNames, Titel, Placement usw. angeben, wie Sie es für richtig halten.

Ich hoffe, diese Lösung hilft.