Click事件在backbone.js中不起作用

Question

我對backbone.js很新。

我有兩個模板在同一頁面上呈現。

在第一個模板上，單擊按鈕正在觸發。 但第二個模板點擊事件沒有觸發

我的代碼看起來如此。

像這樣的app.js代碼

    var UserView = Backbone.Marionette.ItemView.extend({
      template: '#userView',
      tagName: 'li',
      className: 'listItem'
   });


    var UsersView = Backbone.Marionette.CollectionView.extend({
      childView: UserView,
      tagName: 'ul'
    });

   var FormView = Backbone.Marionette.ItemView.extend({
      template: '#formView , #userView ',

     events: {
        'click .submitbutton': 'createNewUser', // this event is triggered
        'click .remove':'removeUser' // this event is not trigerring
      },

      ui: {
        name: '#name',
        age: '#age'
     },

createNewUser: function(){
    //create new user
    this.collection.add({
        name: this.ui.name.val(),
        age: this.ui.age.val(),
    });
    this.ui.name.val('');
    this.ui.age.val('');
},

removeUser: function(){
    console.log('it clicks here');
}

});

    Lab.addRegions({
      form: '#form',
      list: '#list'
   });

  Lab.addInitializer(function(){
   Lab.users = new Users();
   Lab.form.show(new FormView({collection: Lab.users}));
   Lab.list.show(new UsersView({collection: Lab.users}));
   });

我的模板看起來像#userview模板，其中事件不觸發

 <script id="userView" type="text/template">
     <p>Name: <%= name %></p>
     <p>Age: <%= age %></p>
     <button class="remove"> Delete </button> // i am trying to trigger this event in model
</script>

事件正在工作的模板#formview

 <script id="formView" type="text/template">

    <label for="name">Name:</label>
   <input type="text" id="name" />
   <label for="age">Age:</label>
   <input type="text" id="age" />
   <button class="submitbutton">Submit</button>
</script>

Answer 1

每個視圖應該只有一個模板。 在您的示例中，您希望將formView設置為模板屬性兩個模板，因此忽略第二個引用。

在這種情況下，formView應該是一個帶有兩個區域的layoutView。您將使用自己的模板顯示視圖。 感謝事件冒泡layoutView可以對兒童事件做出反應。 您可以在牽線木偶文檔中找到更多信息

PS。 我建議使用最新版本的框架