Question

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

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会更新，变量会在控制台日志中更新，但不会更新到我认为的模板中？

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

快速＆＃34;修复＆＃34;你可以这样做：

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

骨干更新模型多次

2 个答案: