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可以对儿童事件做出反应。您可以在marionette docs中找到更多信息

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

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

1 个答案: