ember.js - Ember.js {{each}} vs {{collection}}

Question

我理解each，collection辅助方法是在我的车把模板中迭代项目列表的两种可能方法。我正在寻找一些关于何时使用each或collection两种方法之间有什么区别的实用建议。

Answer 1

每个：

App.myArray = [1,2,3]

{{#each value in App.myArray}}
  <p>{{value}}</p>
{{/each}}

对应的 HTML

<p>1</p>
<p>2</p>
<p>3</p>

收藏：

{{#collection contentBinding="App.myArray"}}
  <p>{{view.content}}</p>
{{/collection}}

对应的 HTML

<div class="ember-view">
  <p>1</p>
</div>
<div class="ember-view">
  <p>2</p>
</div>
<div class="ember-view">
  <p>3</p>
</div>

如您所见，两者都处理数组。简而言之each，用于显示元素数组，而collection用于显示视图数组

实际使用中的主要区别在于您想要与元素交互时。如果您只想显示数组列表，请使用each帮助程序。

但是，如果您想与数组中的每个元素进行交互，同时保持单击元素的上下文，您collections

让我用一个例子来解释

App.CollectionView = Ember.CollectionView.extend({
  //Here the content belongs to collection view
  content: [1,2,3],
  itemViewClass: Ember.View.extend({
    /*This itemViewClass is like a template which is used by 
    all the elements in the content array of collection view*/
    click: function(){
      //Now this itemViewClass has a content property which is the single element in the collections content
      /* As you see the content of collection view has 3 elements => 3 templates 
         1 single template = Ember.View.extend with it's own content property
         first template has content set to 1
         second template has content set to 2 and so on...
      */
      alert("you clicked"+this.get('content');
    }
  })
})

我想这可以消除你的疑问......

Answer 2

我是 Ember.js 的新手，我还没有使用过 {{collection}}，但是我有什么知识并浏览了 {{collection}} 的文档（http://emberjs.com/api /classes/Ember.Handlebars.helpers.html#method_collection），我推测如下：

{{each}} 助手将遍历对象列表并输出针对每个对象呈现的 {{each}} 标记之间的内容。这只是模板中的一个循环。

{{collection}} 帮助器还将遍历对象列表，但在每次迭代中，它将创建一个新的 View 对象来包含它。如果您使用块形式（{{#collection}}{{/collection}}），标签之间的内容将成为与新创建的视图关联的模板。如果您使用单标签表单（{{collection}}），而不是在此处提供模板，您指定要使用的视图的名称，Ember 将创建该类的视图（而不是通用的 Ember.View）并使用它的关联模板。

使用 {{collection}} 而不是 {{each}} 的原因更加复杂和微妙，而且看起来你只是在开发真正的应用程序时才开始真正得到它们 - 至少，那是到目前为止，这是我对 Ember 很多部分的体验。例如，您会突然意识到出于某种原因需要将循环模板部分作为不同的视图对象 - 可能需要在某个地方包含额外的事件处理程序，或者存储特定于每个循环迭代的额外 UI 状态，例如 isEditing 标志。

Answer 3

正如@Abdull 在对您的问题的评论中所说，{{collection}}视图助手已被弃用，因此{{each}}是建议的用法。

/**
  `{{collection}}` is a `Ember.Handlebars` helper for adding instances of
  `Ember.CollectionView` to a template. See `Ember.CollectionView` for
  additional information on how a `CollectionView` functions.

  ...

  @method collection
  @for Ember.Handlebars.helpers
  @param {String} path
  @param {Hash} options
  @return {String} HTML string
  @deprecated Use `{{each}}` helper instead.
*/

源代码：ember.js/packages/ember-handlebars/lib/helpers/collection.js