Question

我有一个使用此javascript的Ember.js应用程序：

var App = Ember.Application.create({
    LOG_TRANSITIONS: false,
    LOG_TRANSITIONS_INTERNAL: false,
    LOG_VIEW_LOOKUPS: false,
});

App.Router.map(function() {
    this.route('messageviewer', { path: '/message_viewer' });
});

App.Message = Ember.Object.extend({
    message: {},
    topic: '',
});
App.Message.reopenClass({
    messages: {},
    topics: [],

    getAllMessagesList: function(){
        var ret = [];
        for(var i = 0; i < this.topics.length; i++){
            ret = ret.concat(this.messages[this.topics[i]]);
        }
        return ret;
    }.observes('App.Message.messages');

    addMessage: function(message){
        console.log(message);
        if(!(message.topic in this.topics)){
            this.topics.push(message.topic);
            this.messages[message.topic] = [];
        }
        this.messages[message.topic].push(App.Message.create({
            message: message,
            topic: message.topic,
        }));
    },
});

App.MessageviewerRoute = Ember.Route.extend({
    model: function(){
        return App.Message.getAllMessagesList();
    },
});

App.MessageviewerView = Ember.View.extend({
    templateName: 'messageViewer',
    didInsertElement: function(){
        Ember.run.scheduleOnce('afterRender', this, fayeStartListening);
    },
    willDestroyElement: function(){
        fayeStopListening();
    },
});

以下是与视图一起使用的模板：

<div class="row">
    <div id="filter-panel" class="col-md-3">
        <h2>Topics</h2>
        <div class="btn-group-vertical full-width" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="topics">Test 1</input>
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="topics">Test 2</input>
            </label>
        </div>

        {{#with content}}
            {{#each}}
                {{!-- Make a topic list for testing --}}
                <h4>{{topic}}</h4>
            {{/each}}
        {{/with}}
    </div>
</div>

还有一个Faye客户端正在运行，并且它订阅了一个获得相当多消息/秒的频道。在它的订阅中，它调用App.Message.addMessage(message);，我知道这是基于addMessage中的日志输出。此外，我已在Ember Inspector中确认该模型正在更新。但是，DOM并没有改变。如果我切换到不同的路线并返回，列表会显示在Faye客户端收听时收集的所有项目。我不太清楚我应该怎样做以使列表动态更新。

我注意到如果我执行{{#each in content}}或{{#each in model.content}}而不是{{#with}}块，则会收到错误“无法设置未定义的属性'dataSourceBinding'”。另外，我看到有人建议使用this.set(..., ...)，但这在我的情况下不起作用，因为我必须从静态上下文中调用它，所以它是未定义的。

有谁知道如何说服Ember实时更新DOM？

Answer 1

使用pushObject或addObject而不是push，它类似于数组的setter。

由于您正在尝试观看消息对象，因此您正在观察参考是否发生变化，而不是其中的任何内容是否发生变化。

http://emberjs.com/api/classes/Ember.Observable.html#method_notifyPropertyChange

Ember.js不更新具有观察值的DOM

1 个答案: