2017-05-01 14 views
1

저는 backbone.js에 꽤 새로 왔습니다.클릭 이벤트가 backbone.js에서 작동하지 않습니다.

동일한 페이지에 렌더링되는 두 개의 템플릿이 있습니다.

첫 번째 템플릿에서 클릭 버튼이 트리거됩니다. 두 번째 템플릿 클릭 이벤트가 발생하지 않습니다

내 코드가이 모양입니다.

내 템플릿 이벤트가 #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> 

템플릿을 트리거 아니다이 #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

각보기에는 하나의 템플릿 만 있어야합니다. 예제에서 템플릿 속성 2 템플릿으로 설정된 formView에 대해 두 번째 참조가 무시됩니다.

이 경우 formView는 오히려 두 개의 영역이있는 layoutView 여야합니다. 자신의 템플릿으로보기를 표시합니다. layoutView는 자식 이벤트에 반응 할 수있는 이벤트 덕분입니다. 자세한 내용은 marionette docs

PS에 있습니다. 나는 프레임 워크의 최신 버전을 사용할 것을 권합니다.