Question

我在我的应用程序中使用bootstrap 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');
                })
            }); 
        }); 
    });
});

当用户在这里=＆gt; /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？

感谢您的帮助。

Answer 1

Ember和Handlebars不喜欢这个，因为它基本上是复制div的html内容并将其插入另一个div中。但是那个html并不是所需要的一切。 Ember很神奇，背景中发生了很多事情。

你隐藏的div是真正的余烬，所以让我们尽量不要通过调用.html（）来搞乱它。我的想法是直接移动DOM本身。

首先，修改你的popover函数调用以始终创建这个占位符div：

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

接下来，在视图的didInsertElement中从dom中分离内容div：

// 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时会立即分离内容div，所以可以从内容div中删除“hide”css类。

编辑：我在我自己的项目上尝试了这个，它打破了双向绑定。控制器更新了我的把手元素，但任何双向绑定{{input}}助手都没有更新控制器/模型。我最终使用单项下拉菜单，并使用它来防止菜单关闭太快： Twitter Bootstrap - Avoid dropdown menu close on click inside

Answer 2

请参阅以下链接，了解将Ember内容放入Bootstrap popovers的替代方法：

Bootstrap Popovers with ember.js template

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

Emberjs出口在一个bootstrap popover内

2 个答案: