在子模板中显示父模板

Question

我正在创建一个主视图 Cordova/javascript 应用程序，用户在该应用程序中显示产品列表，然后根据他们选择的内容，进入有关产品的基于选项卡的详细信息页面。每个选项卡将根据他们选择的产品生成。随着产品特定信息的加载，我仍然希望在视图中保留所有产品的列表，以便用户可以随时切换产品。这是一张图片，可以帮助更好地理解我在说什么。 。

我尝试使用 ember.js 来启动并运行它，但遇到了一些问题。我可以获得生成的产品的初始列表并切换到产品特定的详细信息，但是一旦我尝试在我的第二个模板中加载产品的主列表，一切都会中断。我知道在父模板中包含两个带有{{outlet}} 的模板，但我无法让子代继承父代。这可以在 ember 中完成还是我应该开始研究其他框架，如 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}}

products/product.handlebars

Product: {{id}}

查看资源部分in the guides。

---

编辑

如果您希望主列表在products 模板和products.product 模板之间显示不同，请从products 模板中删除主列表并将其放入products.index 和 products.product 模板。

然后指定 ProductsIndexController 和 ProductsProductController needs 其父模型。这将使两个模板都可以通过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。