Question

假设我有两个路由的应用程序：“/ services”和“/ services /：service”。

当用户访问：service状态时，我希望他看到与某个特定服务相关的信息列表。到目前为止，琐碎。

但是，当同一个用户访问/服务时，我想显示一个服务列表， plus 每个服务信息（针对每个服务）。我也想在没有任何模板重复的情况下这样做。

显而易见的答案似乎是出口，但看起来所有出口都必须静态命名，而且我有一个以前未确定的数量。它们都有唯一的名称，但我当然不能对模板中的名称进行硬编码。我想动态确定插座名称，所以我可以在renderTemplate中适当地调用this.render来填充它们，但我不知道该怎么做。

你会建议什么？

更新：似乎我可以使用{{template}}处理我的特定情况，但这并不会连接另一条路线。我还是想知道怎么做;我稍后会做更复杂的事情，那肯定会更合适，并且各个控制器中的代码仍然存在重复。

更新：我最终编造了自己的'dynOutlet'助手，如下：

// Define "dynamic outlets". These are just like normal outlets,
// except they dereference the outlet name.
Handlebars.registerHelper('dynOutlet', function(property, options) {
  Ember.assert("Syntax: {{dynOutlet <property>}}", arguments.length === 2);
  var context = (options.contexts && options.contexts[0]) || this,
      normalized = Ember.Handlebars.normalizePath(
        context, property, options.data),
      pathRoot = normalized.root,
      path = normalized.path,
      value = (path === 'this') ? pathRoot : Ember.Handlebars.get(
        pathRoot, path, options);
  return Ember.Handlebars.helpers.outlet(value, options);
});

我还没弄清楚它是否会以我想要的方式工作。

Answer 1

我还需要定义动态Outlets。这是我实施的帮助：

Ember.Handlebars.registerHelper('dynamicOutlet', function(property, options) {
    var outletSource;

    if (property && property.data && property.data.isRenderData) {
      options = property;
      property = 'main';
    }

    outletSource = options.data.view;
    while (!(outletSource.get('template.isTop'))){
      outletSource = outletSource.get('_parentView');
    }

    options.data.view.set('outletSource', outletSource);

    var firstContext = options.contexts.objectAt(0);

    options.hash.currentViewBinding = '_view.outletSource._outlets.' + firstContext.get(property);

    var controller = App.__container__.lookup("controller:movies");
    options.contexts.clear();
    options.contexts.addObject(controller);
    return Ember.Handlebars.helpers.view.call(controller, Ember.Handlebars.OutletView, options);
});

这是我在模板中使用它的方式：

<div>
  {{title}} <!-- accessing title property of context -->
  {{dynamicOutlet outletName}} <!-- accessing the property that should be used as name of the outlet -->
</div>

帮助程序可以将模型的属性用作插座名称。

动态创建出口

1 个答案: