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

Ответ 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 helper.

Но если вы хотите взаимодействовать с каждым элементом в массиве, сохраняя контекст элемента с щелчком, вы 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 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');
    }
  })
})

Я думаю, что это очищает ваши сомнения...

Ответ 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}} более сложная и тонкая, и кажется, что вы только начинаете действительно сталкиваться с ними, работая над реальным приложением - на по крайней мере, это был мой опыт до сих пор со многими частями Эмбера. Например, вы вдруг поймете, что по какой-то причине вы хотите, чтобы ваша секция цикла была отдельным объектом вида - возможно, где-то для включения дополнительных обработчиков событий или хранения дополнительного состояния пользовательского интерфейса для каждой итерации цикла, например, флаг isEditing.

Ответ 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