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}}），而不是在那里提供模板，则指定要使用的View的名称，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

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

3 个答案: