Question

我正在构建一个Ember应用程序。我的模板中有以下内容：

  {{#if App.selected}}
    <p class="small-desc">{{App.selCount}} product added to list</p>
    {{#each App.selected}}
      {{button-custom action="removeFromList" params=this close="true" class="col-xs-12" text=this}}
    {{/each}}
    {{button-custom action="proceedToDetails" class="col-xs-12" color="red" text="Next"}}
  {{/if}}

此处App.selected是一个数组[]。选择产品后，会将其添加到阵列中。首次单击时，将添加项目（已选择）并显示在浏览器上。单击下一个产品时，浏览器中没有可见的更改。但是使用控制台我检查并确保新产品已添加到App.selected。但是Ember只显示了第一个。

由于这个问题非常奇怪，而且在Google上进行了徒劳无功的搜索，我在这里将其作为一个问题发布。

其他信息 -

注意：App不是Ember应用程序。它只是一个变量

我将App.selected填充为：

a = App.selected;
a.push('name');
Ember.set(App, 'selected', a);

button-custom是一个使用＆＃39; text＆＃39;的组件。作为标题。
如果我在没有重新加载的情况下访问相同的路线（选择了多个产品后），阵列中的所有项目都会正确显示。
绑定到同一页面上不同数组的其他{{#each}}工作正常。
我也测试了其他路线上的#each块。到处都是一样的。我将button-custom替换为纯文本＆＃39; asd＆＃39;它表现出相同的行为。（我的直觉告诉我，我犯了一些错误，非常愚蠢！）
数组声明为：
```
App = {
    selected : null
}
```
此模板的控制器为ObjectController。最初，#each绑定到控制器的selected属性。但是当它不起作用时，我将其绑定到命名空间App中的数组。结果是相同的，然后现在。

更新

似乎每个总是迭代一个数组。假设变量#each上有Arr块。如果Arr为null，则#each不会显示任何内容。将Arr设置为任何数组（空或填充）时，Ember会呈现Arr的内容。但这只是第一次发生。下次将Arr设置为其他数组时，除非将其设置为#each，否则Ember不会重新填充null。

Answer 1

Ember不保证JS阵列的最佳效果。所以我不得不将我的数组更改为Ember Mutable Array：

    App.Search = {
        selected = Ember.A([]);
    }

然后，正如@blessenm建议的那样，使用pushObject：

添加到数组中

    a = App.Search.selected;
    a.pushObject('product');
    Ember.set(App.Search, 'selected', a);

要从数组中删除：

    a = App.Search.selected;
    a.removeObject('product');
    Ember.set(App.Search, 'selected', a);

每个绑定到数组的只显示第一个项目

1 个答案: