Backbone.Marionette.Application을 사용할 때 어떻게 이벤트를 초기화합니까?

Question

마리온네 (Marionette)는 훌륭하지만 약간의 것들은 따라하기가 다소 혼란 스러울 수 있습니다. 처음 페이지를로드 할 때 Marionette.Layout을 Marionette.Application 영역에 표시합니다. 그러나 어떤 이유로 클릭 이벤트는 위임되지만 실제로 응답하지는 않습니다. 다른 경로 (레이아웃보기 제거)로 이동 한 다음 경로로 돌아가서 (보기 재 렌더링) 이벤트가 활성화됩니다. 뷰를 연속적으로 두 번 렌더링하게하면 작동합니다. 어쩌면이 시스템을 잘못 초기화하는 것일 수 있습니다.

var  ListView = Backbone.Marionette.Layout.extend({ 
    el: "#listView", // exists on DOM already 
    events: { 
     // this is what is supposed to work 
     // as well as events in my subviews 
     "click" : function() { console.log("clicked");} 
    }); 


var Router = Backbone.Router.extend({ 

    initialize: function(options) { 
     this.app = options.app; 
    }, 
    start: function(page) { 
     console.log("start..."); 
     // with silent false this causes list() to be called 
     // and the view is rendered 
     // but the ListView does not get its events delegated 
     Backbone.history.start({ 
      pushState: false, 
      silent:  false 
     }); 

     // only by running loadUrl here 
     // do I get the events delegated 
     // or by switching between other routes 
     // and coming back to 'list' 

     // but this is causing a second useless calling 
     // of list() re-rendering 
     console.log("loadUrl..."); 
     Backbone.history.loadUrl(page); 
     // actually the events are not yet delegated at this point 
     // if I pause a debugger here. 
     // events only active after the Application finishes its initializers 
    }, 
    routes: { 
     'list': 'list' 
    }, 
    list: function() { 
     var lv = ListView({}); 
     this.app.focus.show(lv) 
    } 
}); 

var app = new Backbone.Marionette.Application(); 

app.addInitializer(function(options) { 
    this.router = new Router({app: this}); 
    this.router.start(); 
}); 

app.addRegions({ 
    // #focus does exist on the DOM 
    focus: "#focus", 
}); 

app.start({}); 

내가 일하는 것이 기대하지만 슬프게도 loadUrl의 마법 효과가 무엇인지 볼 수 없습니다 아직 내가 디버거 모두를 강화했습니다

start: function(page) { 
     console.log("start..."); 
     Backbone.history.start({ 
      pushState: false, 
      silent:  true // don't trigger the router 
     }); 

     // call the router here via history 
     console.log("loadUrl..."); 
     Backbone.history.loadUrl(page); 
     // causes page to be rendered correctly 
     // but events are not delegated 
    }, 

않습니다 있지만 바꾸는 시작 그것이 작동하게 만듭니다.

은 또한 단지 지역으로 레이아웃을 다시 삽입 시도했다 :

app.focus.show(app.focus.currentView) 

어쩌면 단순히이 문제로 실행되지 않을 것이라고이를 구성하는 다른 방법이있다.

Answer 1

100 % 확인이

당신은 요소 경우

이미 DOM에 존재하고, 당신이 그들에보기를 첨부하고 영역에 해당보기를 부착하려고하는 ... 대답이지만, 이 지역의 attach 방법 사용 :

list: function() { 
    var lv = ListView({}); 
    this.app.focus.attach(lv) 
} 

attach 방법은 기존 DOM 요소를 사용하고자하는 상황에 특별히 제작되었다. 대신 show을 호출하면 거기에있는 내용이 대체되어 jQuery 이벤트가 해제 될 수 있습니다.

Answer 2

onRender 섹션 추가

this.delegateEvents();

마리오네트가보기를 닫으면 이벤트도 바인딩 해제됩니다. 보기가 초기화 될 때만 이벤트가 위임됩니다. 이전에 저장된 뷰를 표시하면 delegateEvents 메서드를 다시 호출해야합니다.

https://github.com/marionettejs/backbone.marionette/issues/714