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

Bil*_*iam 7 handlebars.js ember.js

我想在我的{{#each}}模板块中使用视图助手,而不使用全局路径(我的控制器创建并销毁自己的视图).

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

这会奏效

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

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

{{/each}}
</script>
Run Code Online (Sandbox Code Playgroud)


这不会:

<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>
Run Code Online (Sandbox Code Playgroud)

我似乎无法从每个视图助手访问父视图(或者实际上访问除了被迭代的对象的属性之外的任何东西).

我提出的hacky解决方法是:

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

要么

  1. 在App.myListView中创建collectionView
  2. 在该集合视图类中创建itemViewClass视图
  3. 在itemViewClass中移动itemButton视图
  4. 将{{#each}}替换为{{#collection}}

要么

  • 为迭代创建自定义手柄帮助器.

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


解决方法实现

选项#1:修改内容数组

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

选项#2:自定义集合视图

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

Luk*_*lia 3

#each对于您的要求来说太有限了。如果您愿意使用要嵌套在#each. 否则,您的集合视图方法是最好的。将视图添加到模型实例可能会使您的应用程序设计变得混乱,所以我会避免这种情况。

保持模板干净的一个想法是利用Ember.View以下属性:

  • collectionView- 返回最近的祖先Ember.CollectionView
  • itemView- 返回作为直接子代的最近祖先Ember.CollectionView
  • contentView- 返回具有属性内容的最近祖先。