Магистральная модель обновления несколько раз

Question

У меня есть простое базовое приложение, вызванное из другого приложения.
Кажется, диалоговое окно для просмотра сообщения типа «Приветственный пользователь» или «Обновить succesfull».
Я создал это приложение, и когда я его вызываю в первый раз, когда установлена ​​вся переменная: заголовок и сообщение, но когда я его вызываю, значение второго, третьего раза не обновляется, но в консоли я вижу изменение переменной! Это упрощена мой взгляд Перехожу к нему такое же значение

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