帶有ember.js的Bootstrap Popovers模板

Question

我試圖在EmberJS中使用Bootstrap Popover，這樣popover的內容就是一個ember/handlebars模板（帶有綁定等）。如何才能做到這一點？ （恩伯1.0.0-RC2）

Answer 1

這裏是餘燼引導酥料餅的工作示例（見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(); 
       } 
      }); 
     } 

實例化的觀點：

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

這裏，parentSelector可能例如選擇一個按鈕。確保你的my-popover-content模板中有一個ID爲#popovercontent的div容器，以便contentSelector能夠正常工作。當然，您需要在初始化視圖之前加載模板。

雙向綁定應與該解決方案一起使用。

Answer 2

當然，如果你想彈出一個圖像做這樣的東西在您查看

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

我也碰到過這個問題，並且遇到了羅伯特上面提到的同樣的問題，可接受的解決方案根本無法很好地擴展到更復雜的場景。

我遇到了一個非常優雅的修復，但我不確定它是多麼友好。我走的是功能renderToBuffer的優勢 - 見下文：

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

    } 

}); 

這裏的好處是，你可以在模型傳遞，使事情的動態。還沒有完全測試過，但是希望能夠幫助其他人。

Answer 4

我把羅伯特的答案提高了一點。我創建了一個組件，並且僅僅爲內容使用了jQuery元素，而不是調用.html（）。 （這可以緩解頁面中存在重複ID的問題。）

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

我用Bootstrap的'隱藏'類來初始隱藏內容。然後我第一次去popover的時候刪除了'hide'類。從那時起，事情按預期工作。

這是如何在車把模板中使用的組件：

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

Answer 5

我接過特里的回答一點，並認爲我想出了一個簡單的，一般的解決這個問題。

我創建了一個自舉酥料餅的部件，像這樣：

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

下面是相關的模板：

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

的使用注意事項「隱藏」級最初隱藏產生內容。這個類只是「display：none」。沒有這個，事情就不會如你所願。

一旦你有，你可以做簡單的做這樣的事情，只要你想酥料餅：

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

的內容應該可以成爲任何你想要的 - 任意的HTML渲染組件或部分等。當然，您可以根據需要指定其他tagNames，classNames，標題，位置等。

我希望這個解決方案有幫助。