木偶嵌套佈局無法顯示視圖

在我的申請，我創建嵌套佈局視圖，如下：木偶嵌套佈局無法顯示視圖

=>其具有頭部和本體區一個應用佈局圖

var AppLayoutView = Marionette.LayoutView.extend({ 
    el : "body", 
    regions: { 
     headerRegion: "#ecp_header", 
     bodyRegion: "#ecp_body", 
     contentRegion: "#home" 
    },

=>儀表板該嵌套的應用佈局

ECPApp.DashboardLayoutView = Marionette.LayoutView.extend({ 
    el: "#home", 
    regions: { 
     menuRegion: "#left-menu", 
     contentRegion: "#usr-dashboard" 
    },

父佈局（applayout）創建n個身體區域內的佈局視圖增加一組引導選項卡內容窗格DOM的，所以子佈局的視圖（DAS hboard lyt）可以使用第一個選項卡窗格（#home）在第一個選項卡窗格中顯示邊欄菜單和內容部分。

我呈現兩個佈局如下： applayout：

該應用佈局正確呈現並附着所需的頁眉和頁腳元素到DOM。在渲染應用佈局之後，我觸發了一個boostrap.tab.shown事件。在這個事件的處理程序中，我試圖繪製子佈局視圖（儀表板lyt）。

{ 
    render: function() { 
    // load and attach templates for header and body regions. 
    var headerView = new HeaderView({model:session}); 
    this.headerRegion.show(headerView); 

    var bodyView = new BodyView({model:session}); 
    this.bodyRegion.show(bodyView); 

    // finally trigger a bootstrap tab show event, so 
    // the rest of the content will be drawn on tabshown evt. 
    headerView.$el.find('a#home-tab').tab('show'); 
    }, 

    onTabShown: function() { 
    var self = this; 
    // create an instance of nested layout view and show it. 
    var dbLytView = new UserDashboardLayoutView(); 
    dbLytView.render(); 
    //self.contentRegion.show(dbLytView); 
    } 
}

現在問題來了，當我叫applayout.contentregion.show（dashboardlyt），該子佈局的渲染被調用，它加載了一套模板，其內部的區域（左菜單和儀表盤的內容）。但只要渲染調用返回給調用者（父lyt），它就會嘗試執行渲染視圖的show（...），DOM節點正在消失。

下面是子畫面渲染返回之前的截圖。我們可以看到孩子lyt正確添加了它的元素。 enter image description here

一旦渲染返回並且父節點完成show方法，元素將消失。渲染調用返回之前

DOM元素： enter image description here

調用返回之後和父顯示執行 enter image description here

可以看出，在上述PIC突出顯示的節點，是不是提供任何更多，show方法執行後。

我在這裏做錯了什麼？

來源

2015-05-31 Mupparthy Ravindranath

看起來你正在覆蓋你的佈局視圖中的渲染方法，你不應該覆蓋渲染。首先將render方法中的代碼移動到onShow或onRender方法。 – Jacob

其他信息：http://marionettejs.com/docs/v2.4.1/marionette.itemview.html#itemview-render – Jacob

我試過了你的建議。將渲染代碼移動到onRender（）並移除render（）fn，因此基類渲染將完成其工作。現在我的onRender（）被調用，但結果相同。 –

雅各布是對的，聲明渲染方法是完全錯誤的方法。

它應該onRender。

{ 
    onRender: function() { 
    // load and attach templates for header and body regions. 
    var headerView = new HeaderView({model:session}); 
    this.headerRegion.show(headerView); 

    var bodyView = new BodyView({model:session}); 
    this.bodyRegion.show(bodyView); 

    // finally trigger a bootstrap tab show event, so 
    // the rest of the content will be drawn on tabshown evt. 
    headerView.$el.find('a#home-tab').tab('show'); 
    },

來源

2015-09-21 16:34:32

木偶嵌套佈局無法顯示視圖

回答

相關問題