每次循环刷新 Ember.js 中的项目答案

【问题标题】：Refresh item in Ember.js each loop每次循环刷新 Ember.js 中的项目
【发布时间】：2012-12-18 16:48:39
【问题描述】：

我在 ember 中有一个 each 循环，在第一次显示数据时可以正常工作。在其中，有一个 if 语句，它要么显示可用的图像，要么显示一个上传图像的按钮。如果我确实上传了新图片，我希望页面上的项目切换为显示图片，然后按钮将被隐藏。

我发现这样做的唯一方法是删除 if 语句，并在项目上使用一些 bindattr 属性，以便它们可见或隐藏（尽管这迫使我在模型上为视图逻辑创建特殊字段）。我想知道是否有某种方法可以刷新每个循环或仅刷新循环中的特定项目？

ul.thumbnails
    {{#each item in view.content}}
    li.span5.thumbnail
      {{#if item.isPlaceholder}}
      .placeholder
        <span class="photo-category">{{item.category}}</span>
        <button class="btn" {{action "showCategoryFileUpload" item target="parentView"}}>Upload Photo</button>
      {{else}}
      <a {{action "showPhoto" item target="parentView"}} class="photo-link" href="#">
      <img {{bindAttr src="item.url"}} {{bindAttr class="item.islast"}} /><span class="photo-category">{{item.category}}</span>
      </a>
      {{/if}}
    {{/each}}

【问题讨论】：

标签： ember.js handlebars.js

【解决方案1】：

尝试使用Collection helper 以保持{{if}} helper 的绑定，问题是if 条件仅在循环第一次运行时检查，集合视图是ContainerView，它创建了一个查看数组中每个项目的关联绑定。

如果您使用的是最新的 Ember，但使用集合是更优雅的方法，您也可以使用 each 帮助器通过 itemViewClassBinding 完成此操作

{{#collection contentBinding="view.content"}}
  li.span5.thumbnail
  {{#if view.content.isPlaceholder}}
    .placeholder
    <span class="photo-category">{{view.content.category}}</span>
    <button class="btn" {{action "showCategoryFileUpload" item  target="view.parentView"}}>Upload Photo</button>
  {{else}}
    <a {{action "showPhoto" item target="view.parentView"}} class="photo-link" href="#">
      <img {{bindAttr src="view.content.url"}} {{bindAttr class="view.content.islast"}} />          
      <span class="photo-category">{{view.conetn.category}}</span>
    </a>
  {{/if}}  
{{/collection}}

【讨论】：