在子模板中顯示父模板

Question

我正在努力創建一個主視圖cordova/javascript應用程序，其中用戶呈現產品列表，然後根據他們選擇的內容，得到基於標籤的詳細信息頁面產品。每個標籤將根據他們挑選的產品而生成。隨着產品特定信息的加載，我仍然希望在視圖中列出所有產品的列表，以便用戶隨時可以切換產品。這裏有一張圖片可以幫助我更好地理解我在說什麼。 。

我試圖用ember.js來啓動它，但遇到了一些問題。我可以獲得生成的產品的初始列表並切換到產品特定的詳細信息，但是一旦我嘗試在我的第二個模板中加載產品主列表時，所有內容都會中斷。我知道在父模板中包含兩個包含{{outlet}}的模板，但我不能讓這個子類繼承父類。這是可能的做燼，或者我應該開始看像Anuglar其他框架？任何幫助表示讚賞。

Answer 1

在我看來，顯示嵌套模板實際上是Ember比其他框架有優勢的地方。

這應該是非常簡單的使用嵌套資源。在你的路由器中，你可以做類似

App.Router.map(function() { 
    this.resource('products', function() { 
    this.route('product', { path: '/product_id' }); 
    }); 
}); 

很明顯，你必須在每個相應的路由中獲取你的數據。喜歡的東西

App.ProductsRoute = Ember.Route.extend({ 
    model: function() { 
    this.store.find('product'); 
    } 
}); 

App.ProductsProductRoute = Ember.Route.extend({ 
    model: function(params) { 
    this.store.find('product', params.product_id); 
    } 
}); 

在你product模板，你需要包含所有子路由的{{outlet}}渲染成（即products.product）。

例如

product.handlebars

{{#each}} 
    {{name}} 
{{/each}} 

{{outlet}} 

產品/ product.handlebars

Product: {{id}} 

退房資源部分in the guides。

---

編輯

如果你想在主列表到products模板和products.product模板的顯示方式不同，從products模板中刪除主列表，並把它放在products.index和的products.product模板。

然後指定其父模型ProductsIndexController和ProductsProductControllerneeds。這將使兩個模板都可以通過controllers.products訪問產品。

App.ProductsIndexController = Ember.ObjectController.extend({ 
    needs: 'products', 
    products: Ember.computed.alias('controllers.products') 
}); 

App.ProductsProductController = Ember.ObjectController.extend({ 
    needs: 'products', 
    products: Ember.computed.alias('controllers.products') 
}); 

請參閱this jsbin和associated guides。