不同的布局取决于子资源

Question

很抱歉，如果这是一个非常明显的问题，但我有以下路线：

Web.Router.map(function () {
  this.resource('orders', function(){
    this.resource("order", {path:":order_id"});
  });
});

对于我的订单模板，我有类似的东西：

<div class="someclass">
{{outlet}}
</div>

我想要的是：

{{#if onOrderRoute}}
  <div class="someclass">
{{outlet}}
{{else}}
  <div class="someotherclass">
{{/if}}
</div>

我想知道这样做的最佳方法是什么，或者我在做什么？

Answer 1

有多种方法可以实现这一目标。视图具有layoutName属性，可用于指定布局。另一个选项是在子视图上指定一个属性，然后您的模板可以使用view属性绑定到该属性。

例如：

Web.OrderView = Ember.View.extend({
    childView: true
);

然后，在您的模板中绑定到view.childView

{{#if view.childView}}
<!-- code goes here -->
{{/if}}

此外，您甚至可以创建一个mixin，然后将mixin注入每个视图。

Web.ChildViewMixin = Ember.Mixin.create({
    childView: true
});

Web.ChildView = Ember.View.extend(ChildViewMixin, {
});