变通方法实施

Question

我很想在我的{{#each}}模板块中使用视图助手，而不使用全局路径（我的控制器会创建并销毁自己的视图）。

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

这将有效

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

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

{{/each}}
</script>

这不会：

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

我似乎无法从每个视图助手访问父视图（或者实际上访问除了正在迭代的对象的属性之外的任何内容）。

我提出的hacky变通方法是：

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

或

在App.myListView中创建collectionView
在该集合视图类
在itemViewClass
将{{#each}}替换为{{#collection}}

或

为迭代创建自定义手柄助手。

这两个选项看起来都很糟糕。当然，除了创建2个新类（并且深度嵌套4个视图）之外，还有一个更好的选择，只是迭代一个列表。我可以使用替换车把帮手吗？

变通方法实施

选项＃1：修改内容数组

http://jsfiddle.net/FQEZq/3/ 缺点：必须将视图添加到每个模型实例，仅用于迭代。

选项＃2：自定义集合视图

http://jsfiddle.net/ST24Y/1/ 缺点：现在您有两个额外的视图，您不需要/想要，并且对标记的控制较少。从子视图到父实例的引用现在需要parentView.parentView.parentView。

Answer 1

#each对您的要求太有限了。如果您愿意使用要嵌套在#each内的视图的全局路径，则可以使其工作。否则，您的集合视图方法是最好的。将视图添加到模型实例可能会使您的应用程序设计变得浑浊，所以我会避免这种情况。

保持模板清洁的一个想法是利用Ember.View属性，例如：

collectionView - 返回最近的Ember.CollectionView
itemView - 返回最近的祖先，该祖先是Ember.CollectionView
contentView - 返回具有属性内容的最近祖先。

Answer 2

这里最重要的是 - 选项。

可以使用关于您希望如何使用模板的钩子。这些是：

<-- 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}}

初始模板的示例变体，显示了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>

Mmmm ...进一步阅读的参考： Ember.Handlebars.helpers

Ember.js和把手每个助手，带有子视图

变通方法实施

选项＃1：修改内容数组

选项＃2：自定义集合视图

2 个答案: