Ember.js和Handlebar每个辅助对象，带有子视图

我希望在我的{{#each}}模板块中使用视图帮助器，而不使用全局路径（我的控制器创建和销毁自己的视图）

例子。给定具有myList数组属性的视图和itemButton子视图：

这会奏效的

<script type="text/x-handlebars" name="my-list-view">
{{#each myList}} <!-- App.myListView.myList -->

    {{view App.myListView.itemButton}} {{title}}

{{/each}}
</script>

{{{#每个myList}
{{view App.myListView.itemButton}{{{title}}
{{/每个}}

这不会：

<script type="text/x-handlebars" name="my-list-view">
{{itemButton}} <!-- works fine outside the each -->
{{#each myList}}

    {{view itemButton}} {{title}} <!-- itemButton view not found -->

{{/each}}
</script>

{{itemButton}}
{{{#每个myList}
{{view itemButton}{{title}}
{{/每个}}

我似乎无法从“每个视图”辅助对象访问父视图（或者实际上无法访问被迭代对象的属性以外的任何内容）

我想出的解决办法是：

• 将我要使用的视图添加到我正在迭代的项目中

或

在App.myListView中创建collectionView

在该集合视图类中创建itemViewClass视图

在itemViewClass内移动itemButton视图

用{{{集合}替换{{{每个}}}

或

• 为迭代创建自定义把手辅助对象

这两种选择似乎都很可怕。 当然，有一个更好的选择，比创建2个新类（嵌套4个视图）只是迭代列表要好。是否有可替代的车把助手

---

解决方案实现 选项1：修改内容数组 缺点：为了迭代，必须将视图添加到每个模型实例中

选项2：自定义集合视图 缺点：现在您有两个不需要/不想要的附加视图，并且对标记的控制更少。从子视图到父实例的引用现在需要parentView.parentView.parentView。

#每个

对于您的需求来说都太有限了。如果您愿意在

#each

中使用要嵌套的视图的全局路径，则可以使其工作。否则，您的集合视图方法是最好的。将视图添加到模型实例可能会让你的应用程序设计陷入混乱，因此我会避免这种情况

保持模板整洁的一个方法是利用

Ember.View

属性，如：

• collectionView

  -返回最近的祖先，该祖先是

  Ember.collectionView

• itemView

  -返回最近的祖先，该祖先是

  Ember.CollectionView

• contentView

  -返回具有属性内容的最近祖先

---

这里最重要的是选项

您希望如何使用模板的挂钩可用。这些是：

<-- render templates/name.js -->
{{partial 'name'}}

<-- render views/name.js -->
{{view 'name'}}

<-- render views/name1.js with controllers/name2.js -->
{{render 'name1' 'name2'}}

<!-- see also: -->
{{output}}
{{output 'named'}}
{{yield}}

{{partial'name'}}
{{查看'名称'}}
{{render'name1''name2'}}
{{output}}
{{output'命名'}}
{{yield}}

初始模板的示例变量显示了4种不同的选项：

<script type='text/x-handlebars' data-template-name='my-list-view'>
  <h2>Option 1</h2>

  {{#each myList}}
    {{! the 2nd parameter will look for itemButtonController }}
    {{render 'itembutton' itemButton}}
  {{/each}}

  <h2>Option 2</h2>
  {{#each myList}}
    {{! using an Ember Component }}
    {{#item-button }}
      some static text OR {{dynamic}}
    {{/item-button}}
    <!-- in component/item-button.hbs add {{yield}} for where you want the static content to output -->
  {{/each}}

  <h2>Option 3</h2>
  {{#each myList}}
    {{! if the button is to be a link }}
    {{#link-to 'route' parameter tagName='button' classNames='btn'}}
      {{title}}
    {{/link-to}}
  {{/each}}

  <h2>Option 4</h2>
  <p>Ludicrous example showing almost every reference option!</p>

  {{! focus the context on subview data }}
  {{#with someArrayOrCollectionOfView}}
    {{! prepend type to add context - here returning back up to this view's properties }}
    {{#each view.myList}}
      {{! this is equivalent to someArrayOrCollectionOfView[x].name }}
      {{name}}

      {{! a button that hooks in route, model, and 2 controllers, and applies a target for the output when clicked }}
      {{#link-to 'page' controllers.page.nextPage target='outlet' tagName='button' disabledWhen=controller.disableNext }}
        {{model.buttonName}}
      {{/link-to}}
    {{/each}}
  {{/with}}

  {{! generic default target (automatic) }}
  {{outlet}}

  {{! example of a named target }}
  {{outlet 'footerlinks'}}
</script>

选择1
{{{#每个myList}
{{！第二个参数将查找itemButtonController}
{{render'itembutton'itembutton}}
{{/每个}}
选择2
{{{#每个myList}
{{！使用余烬组件}
{{{#项目按钮}
一些静态文本或{{dynamic}
{{/项目按钮}
{{/每个}}
选择3
{{{#每个myList}
{{！如果按钮是链接}
{{{#链接到'route'参数标记名='button'classNames='btn'}}
{{title}}
{{/链接到}
{{/每个}}
选择4
显示几乎所有参考选项的可笑示例

{{！将上下文集中在子视图数据上}
{{{#与someArrayOrCollectionOfView}
{{！添加上下文的前置类型-此处返回此视图的属性}
{{{#每个视图.myList}
{{！这相当于someArrayOrCollectionOfView[x].name}
{{name}}
{{！一个按钮，用于钩住路由、模型和2个控制器，并在单击时为输出应用目标}
{{{#链接到'page'controllers.page.nextPage target='outlet'tagName='button'disabledWhen=controller.disableNext}
{{model.buttonName}
{{/链接到}
{{/每个}}
{{/与}}
{{！通用默认目标（自动）}
{{outlet}}
{{！命名目标的示例}
{{outlet'footerlinks'}}

嗯。。。进一步阅读参考：

---

您能提供一个JSFIDLE示例吗？