多次骨干更新模型答案

【问题标题】：Backbone update model multiple times多次骨干更新模型
【发布时间】：2013-06-30 10:26:08
【问题描述】：

我有一个从其他应用程序调用的简单主干应用程序。
它似乎是一个对话框，用于查看“欢迎用户”或“更新成功”等消息。
我已经创建了这个应用程序，当我第一次调用它时，所有变量都已设置：标题和消息，但是当我第二次调用它时，第三次值没有更新，但在控制台中我看到变量发生了变化！这是我的简化视图，我传递给它相同的值

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);
    }
});

要更新到另一个视图，我使用此代码作为示例，如果我将其跟踪到控制台，则该消息很好：

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

为什么更新了 html，变量在控制台日志中更新但没有进入我认为的模板？

【问题讨论】：

标签： jquery templates backbone.js

【解决方案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);
}

这样，您的应用应该可以正常运行。

【讨论】：

【解决方案2】：

嗯，似乎可能导致初始化/渲染调用编号 1 工作并且后续调用什么都不做的第一件事是：

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

要快速“解决”这个问题，您可以这样做：

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

【讨论】：