0

I have a simple backbone app called from other app.
It's seems a dialog box to view message like "Welcome user" or "update succesfull".
I have created this app and when I call it the first time all variable is set: title and message but when I call it the second, third times value aren't updated but in console I see the variable change! This is my view simplified I pass to it same value 

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

To update into another view I use this code for exampl and the message is good if I trace it into the console:

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

Why the html is updated, variable is updated in console log but not into the template I think?

4

2 回答 2

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

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

于 2013-07-04T20:33:14.220 回答
0

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

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

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

this.$el.html(html);
if($("#status-message").length === 0) {
    $("body").append(this.el);
}
于 2013-06-30T14:38:21.880 回答