javascript - 在子模板中显示父模板

Question

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

我尝试使用 ember.js 来启动并运行它，但遇到了一些问题。我可以获得生成的初始产品列表并切换到产品特定详细信息，但是一旦我尝试在第二个模板中加载产品主列表，一切都会中断。我知道在父模板中包含两个带有 {{outlet}} 的模板，但我无法让子模板继承父模板。这可以在 ember 中实现吗？还是我应该开始考虑其他框架，比如 Anuglar？任何帮助表示赞赏。

Answer 1

在我看来，显示嵌套模板实际上是 Ember 相对于其他框架的优势所在。

使用嵌套资源这应该非常简单。在您的路由器中，您可以执行类似的操作

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

显然，您必须在每个相应的 route 获取数据。类似的东西

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)。

例如

产品. Handlebars

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

{{outlet}}

产品/product.handlebars

Product: {{id}}

查看资源部分in the guides .

<小时/>

编辑

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

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