在子模板中显示父模板

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}}

<强>产品/ 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。