0

我在我的应用程序中使用引导弹出窗口，我需要在其中渲染一个插座。

我有这个嵌套路线：

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>

这是我的弹出框初始化：

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

到目前为止，它正确地呈现了我的出口，但是在图像模板中，我有一些修改 DOM 的按钮并且它不更新 html。除非我再次关闭并打开弹出框，否则我可以看到修改。

是否可以直接在代码中渲染插座？或者是否可以更新我的弹出框？

谢谢您的帮助。

4

2 回答 2

0

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

你隐藏的 div 是真正的 ember 东西，所以让我们尽量不要通过调用 .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 中删除“隐藏”css 类。

编辑：我在我自己的项目上试过这个，它打破了双向绑定。控制器更新了我的车把元素，但任何双向绑定 {{input}} 助手都没有更新控制器/模型。我最终使用了一个单项下拉菜单，并使用它来防止菜单关闭太快： Twitter Bootstrap - 避免在点击内部时关闭下拉菜单

于 2015-01-21T05:34:55.433 回答
0

有关将 Ember 内容放入 Bootstrap 弹出框的另一种方法，请参阅这些链接：

使用 ember.js 模板引导弹出框

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

于 2015-01-21T05:41:20.617 回答