Question

以下是我的路线：

ExtractCreator.Router.map(function () {
    this.route('filter', { path: '/' }, function () {
        this.route('geog_levels');
    });
});

这是我创建jquery ui popup的视图：

ExtractCreator.FilterGeogLevelsView = Ember.View.extend({
didInsertElement : function(){
    var controller = this.controller;
    $('#filter-dialog').dialog({
        modal:true,
        stack: false,
        title: "Geogography Levels Filter",
        close: function(e,ui) {
            controller.transitionToRoute('filter');
        },
    }).dialog("moveToTop");
}
});

模板：

      {{#each geog_level_group in model}}
            <h3>{{geog_level_group.label}}</h3>
            {{#each geog_level_filter in geog_level_group.geog_level_filters}}
            <div {{bind-attr class="geog_level_filter.disabled?:disabled"}}>
                <label>{{geog_level_filter.label}} - {{geog_level_filter.id}}</label> 
                {{input type="text" value=geog_level_filter.label }}
            </div>
            {{/each}}
        {{/each}}

我在模板中将输入绑定到我的模型，但每当我在输入字段中输入任何内容时，它都不会在页面上的任何其他位置更新，也不会在我的（chrome）ember检查器视图中显示更新该模型。

如果我从ember检查器手动更改值，则它会在弹出窗口内正确更新。

如果我把它从弹出窗口中取出（或者只是删除弹出代码），那么一切都会正确绑定，当我更改输入值时标签会更新。

如何从对话框内部获得正确的绑定行为？

Answer 1

我曾经遇到过同样的奇怪行为，问题是mayBe，因为带有子视图的didInsertElement。（是的，你有一些孩子的观点，因为你使用每个和一个余烬{{input}}，这是一个视图，以及。）

可以解决问题的一种方法是在ember完成后运行你的模态以渲染队列中的所有内容。您可以通过修改代码来实现此目的：

didInsertElement : function(){
var controller = this.controller;
Ember.run.scheduleOnce('afterRender', this ,function(){
    $('#filter-dialog').dialog({
    modal:true,
    stack: false,
    title: "Geogography Levels Filter",
    close: function(e,ui) {
        controller.transitionToRoute('filter');
    },}).dialog("moveToTop");
 });
}

Answer 2

事实证明，没有发生绑定的原因是jQuery-ui对话框函数将“＃filter-dialog”元素附加到body标签，但在创建我的Ember应用程序时，我使用了“ “rootElement”选项将Ember的范围限制为id为“extract-creator”的另一个div。

我的应用程序创建代码：

ExtractCreator = Ember.Application.create({
  rootElement: '#extract-creator'
});

在创建对话框时使用appendTo选项，我可以将其保留在Ember应用程序的范围内：

ExtractCreator.FilterGeogLevelsView = Ember.View.extend({
didInsertElement : function(){
    var controller = this.controller;
    $('#filter-dialog').dialog({
        modal:true,
        stack: false,
        title: "Geogography Levels Filter",
        appendTo: "#extract-creator",
        close: function(e,ui) {
            controller.transitionToRoute('filter');
        },
    }).dialog("moveToTop");
}
});

另一种解决方案是从Ember创建选项哈希中删除“rootElement”行，使其默认为body标记。

特别感谢Buck Doyle在评论中发布了一个有效的JSBin。

使用jquery ui对话框时，Ember中的双向绑定中断

2 个答案: