主干模型多次更新

Question

我有一个简单的骨干应用程序称为从其他应用程序。

它看起来像是一个对话框，可以看到像“欢迎用户”或“更新成功”这样的消息。

我已经创建了这个应用程序，当我第一次调用它时，所有的变量都设置好了: title和message，但当我调用它时，第二次、第三次的值都没有更新，但在控制台中我看到了变量的变化！这是我简化的视图，我给它传递了相同的值

var StatusMessageView = Backbone.View.extend({
    template : tmplStatusMessage,
    model : new StatusMessageModel(),
    initialize : function (data) {
        this.listenTo(this.model, "change", this.render);
        this.model.set(data);
    },
    render : function () {
        console.log("View - StatusMessage.render msg: " + this.model.get('message'));
        var template = Handlebars.compile(this.template);
        var html = template(this.model.toJSON());

        //-----------INTO THIS CONSOLE LOG I SEE HTML UPDATED!!! WHY???
        console.log('HTML: ' + html);

        if($("#status-message").length === 0) {
            $("body").append(html);
        }

            //AFTER A DELAY I CLOSE THE APP 
        var self = this;
        var intro_timer = setTimeout(function () {
            $("#status-message").addClass("enter");

            var outro_timer = setTimeout(function () {
                self.closeMessage();
            }, 5000);
        }, 500);
    }
});

为了更新到另一个视图，我在exampl中使用了下面的代码，如果我在控制台中跟踪它，消息是好的：

statusMessageView.model.set({
    title : title,
    message : msg
});

为什么html会更新，变量会在控制台日志中更新，但不会更新到模板中？

Answer 1

问题是#status-message元素，它只在第一次被覆盖，为了避免这个问题，你可以尝试这样做：

render : function () {
    console.log("View - StatusMessage.render msg: " + this.model.get('message'));
    var template = Handlebars.compile(this.template);
    var html = template(this.model.toJSON());



    if($("#status-message").length === 0) {
        $("body").append('<div id="status-message"></div>');
    }

    $("#status-message").html(html);

    var self = this;
    var intro_timer = setTimeout(function () {
        $("#status-message").addClass("enter");

        var outro_timer = setTimeout(function () {
            self.closeMessage();
        }, 5000);
    }, 500);
}

通过这种方式，你的应用程序应该可以正常工作。

Answer 2

嗯，第一件似乎可能导致初始化/渲染调用1起作用，随后的调用什么也不做的事情是：

if($("#status-message").length === 0) {
    $("body").append(html);
}

要快速“修复”此问题，您可以执行以下操作：

this.$el.html(html);
if($("#status-message").length === 0) {
    $("body").append(this.el);
}