在Ember视图中,重新渲染内部子视图后运行代码的最佳方法是什么?

时间:2012-06-27 21:17:36

标签: ember.js

我发现了很多关于如何使用动态数据等初始化jQuery插件的问题,通常答案是你应该使用didInsertElement钩子。我的问题是,当使用ember-data时,最初将视图插入为空,然后通过绑定填充模板变量。因此,didInsertElement我需要的元素不在那里。

我找到了一个适合我的解决方案,但我认为必须有更好的解决方案。

除了didInsertElement方法之外,我还会观察控制器中的属性并从那里调用我的代码,包裹在Ember.run.next中,以便之前呈现子视图。

是否有更好的解决方案来响应更新的子视图?

2 个答案:

答案 0 :(得分:1)

这取决于应用程序的大小以及视图呈现的元素数量。

编辑:您可能会成功观察RecordArray的isLoaded属性。这里有一些细节:https://github.com/emberjs/data/blob/master/packages/ember-data/lib/system/record_arrays/adapter_populated_record_array.js#L21

我用于具有单个对象作为其内容的视图的一个选项是:

MyApp.CustomView = Ember.View.extend({
    content: null,

    contentObserver: function() {
        this.rerender();
    }.observes('content')
}

如果您的视图内容是一个列表,那么重新渲染列表中每个项目的视图是没有意义的。

但是,我认为这种方法与您现在正在做的非常相似。

另一种方法是使用Ember Data实现自己的适配器。这样,您可以告诉应用程序的其余部分已完成加载数据。类似的东西:

MyApp.Adapter = DS.Adapter.create({
    //Finding all object of a certain type. Fetching from the server
    findAll: function(store, type, ids) {
        var url = type.url;
        jQuery.getJSON(url, function(data) {
            store.loadMany(type, data);
        });

        //Perform some custom logic here... 
    }
}

这应该有用,但它不像它应该/可能那样通用。

此外,您可能需要查看此提交,该提交允许注册一次性事件。

https://github.com/emberjs/ember.js/commit/1809e65012b93c0a530bfcb95eec22d972069745#L0R19

答案 1 :(得分:1)

我遇到了这个问题,并提出了一个解决方案:make a handlebars helper,告诉您子部分何时渲染。希望能帮助其他人!