javascript - 动态创建网点

Question

假设我有一个包含两条路由的应用程序:“/services”和“/services/:service”。

当用户访问 :service 状态时，我希望他看到与某项特定服务有关的信息列表。到目前为止，微不足道。

但是，当同一个用户访问/services 时，我想显示一个服务列表，加上每个服务的信息(针对每个服务)。我也想在没有任何模板重复的情况下执行此操作。

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

你有什么建议？

更新:看来我可以使用 {{template}} 来处理我的特殊情况，但这并没有连接另一条路线。我仍然想知道该怎么做；稍后我会做更复杂的事情，这肯定更适合，并且在各自的 Controller 中仍然存在重复代码。

更新:我最终组成了自己的“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>

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