单击事件在 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 可以对子事件做出反应。您可以在 marionette 文档

中找到更多信息

PS。我推荐使用最新版本的框架

单击事件在 backbone.js 中不起作用

Click event not working in backbone.js

javascript

backbone.js

marionette