Emberjs插座內的自舉popover

我在我的應用程序中使用引導彈窗，我需要渲染它內部的插座。Emberjs插座內的自舉popover

我有這樣的嵌套的路線：

this.resource('pages', function(){ 
    this.resource('page', { path: ':id' }, function(){ 
     this.resource('edit', function(){ 
      this.resource('images', function(){ 
       this.resource('image', { path: ':image_id'}, function(){ 
        this.route('edit'); 
       }) 
      }); 
     }); 
    }); 
});

當用戶在這裏=>/pages/1/edit/時，他的形象是路線上點擊/images但呈現{{outlet}}的酥料餅像這裏面：

<div class="popover-content hide"> 
    {{outlet}} 
</div>

這是我的popover初始化：

$img.popover({ 
     html: true, 
     content: function() { 
     return $('.popover-content').html(); //need to have the outlet here 
     } 
    });

到目前爲止，它正確渲染我的出口，但在圖像模板中，我有一些修改DOM的按鈕，它不更新HTML。除非我關閉並再次打開popover，否則我可以看到修改。

是否有可能直接在代碼中渲染插座？或者有可能讓我的popover更新？

感謝您的幫助。

來源

2015-01-08 SuperMarco

Ember和Handlebars不喜歡這個，因爲它基本上是複製一個div的html內容並將其放到另一個div中。但是那個html並不是所有需要的。 Ember很神奇，背景中有很多東西在發生。

您的隱藏div是真正的灰燼材料，所以我們儘量不要通過調用.html（）來惹惱它。我的想法是從字面上移動DOM本身。

第一，修改你的酥料餅的函數調用總是創建此佔位符格：

content: '<div id="placeholder"></div>',

接下來，分離從DOM內容DIV視圖的didInsertElement：

// get the popover content div and remove it from the dom, to be added back later 
var content = Ember.$('.popover-content').detach(); 

// find the element that opens your popover... 
var btn = Ember.$('#btn-popup-trigger').get(0); 

// ... and whenever the popover is opened by this element being clicked, find the placeholder div and insert the content element 
// (this could be improved. we really just want to know when the popover is opened, not when the button is clicked.) 
btn.addEventListener("click", function() { 
    content.appendTo("#placeholder"); 
});

自

當調用didInsertElement時，content div會立即分離，您可以從內容div中刪除「隱藏」css類。

編輯：我試了這個在我自己的項目，它打破了雙向綁定。控制器更新了我的handlebars元素，但任何雙向綁定的{{input}} helpers都沒有更新控制器/模型。最後我用一個單一的項目下拉菜單中，並用它來防止菜單，關閉太快： Twitter Bootstrap - Avoid dropdown menu close on click inside

來源

2015-01-21 05:34:55

見這些鏈接的另一種方法把灰燼的東西在引導popovers：

Bootstrap Popovers with ember.js template

https://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html

來源

2015-01-21 05:41:20

Emberjs插座內的自舉popover

回答

相關問題