마리오네트 레이아웃을 올바르게 사용하는 방법은 무엇입니까?

Question

내 현재 코드는 다음과 같습니다 : 나는이 작품을 만들기 위해 내의 OnRender 방법에 여분의 레이아웃이 필요한 이유

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'marionette', 
    'templates', 
    'gridView', 
    'detailView', 
    'detailModel' 
], function ($, _, Backbone, Marionette, JST, GridView, DetailView, DetailModel) { 

    'use strict'; 

    return Marionette.Layout.extend({ 

     el: '#main', 

     template: JST['app/scripts/templates/main.ejs'], 

     initialize: function() { 
      this.render(); 
     }, 

     onRender: function() { 
      var Layout = Marionette.Layout.extend({ 
       el: 'div', 

       template: _.template(""), 

       regions: { 
        grid: '#grid', 
        detail: '#detail' 
       } 
      }); 
      this.layout = new Layout(); 
      this.layout.render(); 
     }, 

     showGrid: function() { 
      var detailModel = new DetailModel(); 

      var g = new GridView(detailModel); 
      var d = new DetailView(detailModel); 

      this.layout.grid.show(g); 
      this.layout.detail.show(d); 
     } 

    }); 

}); 

는 내가 이해하지 못하는 것은. '#grid'와 '#detail'div의는 main.ejs 템플릿의 일부이지만, 다음은 작동하지 않습니다

return Marionette.Layout.extend({ 

    el: '#main', 

    template: JST['app/scripts/templates/main.ejs'], 

    regions: { 
     grid: '#grid', 
     detail: '#detail' 
    }, 

    initialize: function() { 
     this.render(); 
    }, 

    onRender: function() { 
     var detailModel = new DetailModel(); 

     var g = new GridView(detailModel); 
     var d = new DetailView(detailModel); 

     this.grid.show(g); 
     this.detail.show(d); 
    } 

}); 

요소가 이미 지역 객체에 지정된 경우 레이아웃에만 작동 보인다 레이아웃이 생성 될 때 존재합니다. 그러나 문서는 이것이 사실이 아니라고 말합니다.

나는 아마 뭔가 잘못하고 있습니다. 근데 뭐 ?

감사 로저

Answer 1

두 번째 코드 예제에서는 onShow 대신 onRender의를 사용해보십시오.

또한 마리오 네트에서 show 메서드로보기/레이아웃을 전달할 때 프레임 워크가 해당 메서드를 호출하기 때문에 보통 render을 호출하지 않습니다.

당신은 당신이 여기 달성하기 위해 노력하고 무엇에 다른 테이크를 볼 수 있습니다

다음 onRender에 .show()를 호출

• https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js (특히 라인 43 ~ 46) 추가 경고로

Answer 2

을 메서드는 해당 레이아웃 아래에 중첩 된 요소에 부정적인 영향을 미칠 수 있습니다. 특히 나중에 onShow을 사용하여 뷰의 DOM 하위 트리가 jQuery에 액세스 할 수 있도록해야합니다.

.show()은 해당 레이아웃의 모든 하위 뷰에서 "show"이벤트를 발생시키고 해당 하위 뷰가 내용을 렌더링하고 삽입하기 전에 해당 하위 뷰 ("show"이벤트를 수신 대기)에서 호출됨을 의미 할 수 있습니다.