如何正確使用Marionette佈局？

Question

我當前的代碼看起來是這樣的：

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

    }); 

}); 

我不明白的是爲什麼我需要一個額外的佈局我的OnRender方法來完成這項工作。該「#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。

另外，在Marionette中，您通常不會自己調用render，因爲當您將視圖/佈局傳遞給show方法時，框架將調用該方法。

你可以看到你正在試圖完成什麼在這裏一個不同的看法：

• https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js（尤其是線43-46）

Answer 2

作爲一個額外的警告，在onRender調用.show()方法可以負面影響嵌套在該佈局下的任何東西，特別是如果您試圖在後面使用onShow以確保視圖的DOM子樹是jQuery可訪問的。

.show()觸發一個「秀」事件跨佈局中的任意子視圖，並可能意味着onShow()就是所謂的那些子視圖（其監聽「秀」事件）的子視圖已呈現，並插入其內容之前。