2017-05-01 20 views
1

backbone.jsでかなり新しいです。clickイベントがbackbone.jsで機能していない

私は同じページにレンダリングされる2つのテンプレートを持っています。

最初のテンプレートで、クリックボタンがトリガーされます。 2番目のテンプレートのクリックイベントは発生していません

私のコードはこれを見ています。

は私のテンプレートは、イベントが#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> 
を働いているイベントは

<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> 

テンプレートをトリガないSこの#userview テンプレートのように見えるこの

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

のようなコードをapp.js

答えて

0

各ビューには1つのテンプレートのみが必要です。 あなたの例では、2つのテンプレートテンプレートプロパティとしてformViewを設定したいので、2番目の参照は無視されます。

この場合、フォームは2つの領域を持つlayoutViewでなければなりません。独自のテンプレートでビューを表示します。 イベントのおかげでlayoutViewは子イベントに反応することができます。 詳細は、marionette docs

PSにあります。私はフレームワークの最新バージョンを使用することをお勧めします

関連する問題