Ember路線+網點

經過長時間潛入Backbone +木偶之後，我一直在Ember訓練一週左右。我已經能夠使用它並輕鬆地創建一個博客。只要該應用程序依賴路線，就沒有問題。現在我想構建一個只有2條路線的應用程序，並更多地依賴於狀態。我想定義下面的嵌套HTML結構：Ember路線+網點

<div id="topbar"></div> 
<div id="content"></div> 
<div id="botbar"></div>

我希望topbar和botbar保持不變，無論內容是什麼。內容可能是「POS內容」

<div id="pos"> 
    <div id="leftsidebar">...</div> 
    <div id="cart">...</div> 
    <div id="buttons">...</div> 
    <div id="rightsidebar">...</div> 
    <div id="header">...</div> 
</div>

或「PARAMS內容」

<div id="params">...</div>

到目前爲止，我已經成功地建立起使用下面的代碼嵌套的第一級：

App = Em.Application.create({}); 

App.Router.map(function() { 
    this.route('index', { path: '/' }); 
    this.route('params', { path: '/params' }); 
}); 

App.IndexRoute = Em.Route.extend({ 
    renderTemplate: function() { 
     this.render(); 
     this.render('topbar', { outlet: 'topbar' }); 
     this.render('pos', { outlet: 'content' }); 
     this.render('botbar', { outlet: 'botbar' }); 
    }  
});  

App.ParamsRoute = Em.Route.extend({ 
    renderTemplate: function() { 
     this.render(); 
     this.render('topbar', { outlet: 'topbar' }); 
     this.render('params', { outlet: 'content' }); 
     this.render('botbar', { outlet: 'botbar' }); 
    } 
});

我看到在定義了路線的chrome Ember擴展中，我的控制器（TopbarController，BotbarController和PosController/ParamsController取決於路由）似乎是實例化的。

現在我想要更深入，並有一個控制器的每個子插座（左邊欄，購物車等），但我不知道如何建立第二層的嵌套。

文檔似乎並沒有幫助我，谷歌是不是我的朋友對這個:(你們能幫幫我嗎？謝謝。

來源

2014-02-07 ImSoNuts

網點燼是上下文到當前活動的路線。

如果您有以下應用程序模板

<div id="topbar"> 
    {{ outlet 'topbar' }} 
</div> 
<div id="content"> 
    {{ outlet }} 
</div> 
<div id="botbar"> 
    {{ outlet 'botbar' }} 
</div>

您可以通過它移入ApplicationRoute

清理repeatitive代碼

現在你可以有以下指標模板

<div id="index"> 
    <div id="left"> 
    {{ outlet "left" }} 
    </div> 
    <div id="content"> 
    {{ outlet }} 
    </div> 
    <div id="right"> 
    {{ outlet 'right' }} 
    </div> 
</div>

你需要通過渲染澄清出口位於哪個方面「變成」了。

App.IndexRoute = Ember.Route.extend({ 
    renderTemplate: function(){ 
    this._super.apply(this, arguments); 
    this.render('right',{outlet: 'right', into: 'index'}) 
    this.render('left',{outlet: 'left', into: 'index'}) 

    } 
})

來源

2014-02-07 22:40:19

忘記將鏈接添加到工作jsbin http://emberjs.jsbin.com/hecus/2/edit –

哇，這正是我一直在尋找！非常感謝：D – ImSoNuts

Ember路線+網點

回答

相關問題