在子模板中显示父模板

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。