骨干创建一个新的视图实例每个请求页面

Question

在我的应用程序中，我创建了一个视图。这个视图由一个模板组成，就像一个小表格。窗体有一个按钮，在我的视图中，我创建一个点击事件来处理这个按钮，以创建另一个视图的新实例，将表单数据传递给此视图并将数据放在html元素上。问题是：如果我在家中路线或产品3次输入并发送表单数据，将出现3个相同的表单数据。

表单视图

window.userFormView = Backbone.View.extend({ 
    el:$("#principal"), 
    events : { 
    'click .userButton' : 'newUser' 
}, 
initialize:function(){ 
    this.template = _.template($("#userFormView").html()); 
}, 
newUser : function(ev) { 
    ev.preventDefault(); 
    //criamos uma nova instancia do model 
    window.user_view = new userViewes({model: users}); 
    var u = { nome : $("#iName").val() ,sobrenome : $("#iLName").val() }; 
    var user = new userModel(u); 
    users.add(user); 
    console.log(users); 
    return false; 
}, 
    render: function() { 
    this.$el.html(""); 
    this.$el.html(this.template); 
    } 
}); 

表单模板查看

 <script type="text/template" id="userFormView"> 
     <form action="" id="form-new-user" class="formulario"> 
      <span class="label">Name?</span><input type="text" id="iName" class="input"> 
      <span class="label">Last Name?</span><input type="text" id="iLName" class="input"> 

      <button class="userButton">Send</button> 
      <hr> 

     </form> 
     </script> 

和我的路线是这样的：

window.AppRouter = Backbone.Router.extend({ 

// 
// Definindo rotas 
// 
routes: { 
    'home':  'index', 
    'product': 'productsList', 
    'foo1': 'doNothing1', 
    'foo2': 'doNothing2' 
}, 

index: function() { 

     window.users = new userCollections(); 
     window.userForm = new userFormView(); 
}, 
productsList : function() { 

    window.pCollection = new productCollections(); 
    window.produtoForm = new produtoFormView(); 
}, 
doNothing1: function() { 
    console.log('doNothing1()'); 
}, 
doNothing2: function() { 
    console.log('doNothing2()'); 
} 
}); 
window.router = new AppRouter(); 
Backbone.history.start(); 

userViewes查看

window.userViewes = Backbone.View.extend({ 
    // model: users, 
    el: $("#userContainer"), 
    initialize: function(){ 
    this.model.on("add", this.render, this); 
    this.model.on("remove", this.render, this); 
    }, 
    render: function() { 
    var self = this; 
    self.$el.html(""); 
    this.model.each(function(user, indice) { 
     self.$el.append((new userView({model: user })).render().$el); 
    }); 
    return this; 
    } 
}); 

，最终用户视图：

window.userView = Backbone.View.extend({ 
    //model: new userModel(), 
    tagName : 'div', 
    class : "userName", 
    events :{ 
    'click .editar' : 'editar', 
    'click .remover' : 'remover', 
    'blur .sobrenome': 'fechar', 
    'keypress .sobrenome' : 'onEnterUpdate', 
    }, 
    editar : function(ev) { 
    ev.preventDefault(); 
    this.$('.sobrenome').attr('contenteditable', true).focus(); 
    }, 
    fechar : function(ev) { 
     var sobrenome = $(".sobrenome").text(); 
     this.model.set("sobrenome", sobrenome); 
     $(".sobrenome").val(); 
     this.$(".sobrenome").removeAttr("contenteditable"); 
    }, 
    onEnterUpdate : function(ev) { 
    var self = this; 
    if(ev.keyCode == 13) { 
     self.fechar(); 
     _.delay(function(){ 
     self.$(".sobrenome").blur(); 
     }, 100); 
    } 
    }, 
    remover : function(ev) { 
    ev.preventDefault(); 
    window.users.remove(this.model); 
    }, 
    initialize: function(){ 
    this.template = _.template($("#userTemplate").html()); 
    }, 
    render : function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

Answer 1

当您的视图是使用el选项，让你做一个新的前务必清理现有视图。

事实上，每当您在路由之间切换时（没有整页刷新），都会创建一个指向相同元素的新实例，这会导致越来越多的事件处理程序绑定到DOM中的el元素，并且视图由于绑定而留在内存中。尝试是这样的：

index: function() { 
    window.users = window.users || new userCollections(); 
    if(window.userForm){ 
     // clean up is important 
     window.userForm.remove(); 
    } 
    window.userForm = new userFormView(); 
}, 

当然和，而不是重复在所有路线类似的代码，有一个像this.currentView变量指向积极看法，并认为确实需要一个共同的功能，清理

PS ：向窗口对象添加属性是一种不好的做法。创建您自己的名称空间或使用路由器实例代替窗口

Answer 2

我找到了答案。我实现了单例模式来获取对象的一个​​实例。请遵循以下代码：

 var single = (function(){ 
     function createInstance() { 
      window.userForm = new userFormView(); 
      window.users  = new userCollections(); 
     } 

     function users() { 
      return window.users; 
     } 

     function userForm() { 
      return window.userForm; 
     } 

     return { 
      init : function() { 
       if(!window.users && !window.userForm) { 
        createInstance(); 
       }else{ 
        this.render(); 
       }    
      }, 

      render: function() { 
       window.userForm.render(); 
      } 

     } 
    }()); 

    single.init();