Question

此代码的问题是渲染代码输入两次，缓冲区不在我期望的位置。即使我拿到缓冲区，我推入的内容也不会呈现给屏幕。

App.FilterView = Ember.View.extend({
init: function() {
    var filter = this.get('filter');
    this.set('content', App.ViewFilter.find(filter));
    this._super();
},

render: function(buffer) {
    var content = this.get('content');
    if(!this.get('content.isLoaded')) { return; }

    var keys = Object.keys(content.data);
    keys.forEach(function(item) {
        this.renderItem(buffer,content.data[item], item); 
    }, this);

}.observes('content.isLoaded'),

renderItem: function(buffer, item, key) {
    buffer.push('<label for="' + key + '"> ' + item + '</label>');

}
});

App.ViewFilter.find（）

App.ViewFilter = Ember.Object.extend();
App.ViewFilter.reopenClass({
find: function(o) {
    var result = Ember.Object.create({
        isLoaded: false,
        data: ''
    });
    $.getJSON("http://localhost:3000/filter/" + o, function(response) {
        result.set('data', response);
        result.set('isLoaded', true);
    });

    return result;
}
});

我正在获取我期望的数据，一旦isLoaded触发器，一切都运行，我只是没有在我的浏览器中获取HTML。

Answer 1

事实证明，答案与我在$ getJSON调用中使用jquery then（）时的答案非常接近。如果您不熟悉承诺，那么文档并不完全是直截了当的。这是你需要知道的。您必须在promise之外创建一个对象 - 您将在结束时立即返回，并且在promise中将返回一个函数，该函数在返回数据后更新该对象。像这样：

App.Filter = Ember.Object.extend();
App.Filter.reopenClass({
find: function(o) {
    var result = Ember.Object.create({
        isLoaded: false,
        data: Ember.Object.create()
    });
    $.getJSON("http://localhost:3000/filter/" + o).then(function(response) {
            var controls = Em.A();
            var keys = Ember.keys(response);
            keys.forEach(function(key) {
                controls.pushObject(App.FilterControl.create({
                    id: key,
                    label: response[key].label,
                    op: response[key].op,
                    content: response[key].content
                    })
                );
            });

            result.set('data', controls);
            result.set('isLoaded', true);
    });
    return result;
}
});

无论then（）内的函数是什么，都是在返回数据后将调用的回调例程。它需要引用您在$ getJSON调用之外创建的对象并立即返回。然后这在视图中起作用：

didInsertElement: function() {

if (this.get('content.isLoaded')) {
    var model = this.get('content.data');
    this.createFormView(model);
}
}.observes('content.isLoaded'),

createFormView: function(data) {
    var self = this;

var filterController = App.FilterController.create({ model: data});
    var filterView = Ember.View.create({
    elementId: 'row-filter',
    controller: filterController,
    templateName: 'filter-form'
    });

    self.pushObject(filterView);
},

您可以看到完整的应用（并且更完整/更复杂）示例here

延迟ember视图渲染直到$ getJSON isLoaded

1 个答案: