如何更新 emberjs 数组以便#each 听到更改？

Question

如果要插入控制器属性数组或从数组中移除控制器属性，如何让 Each 更新有很多问题。很简单，只需使用 Ember 内置的 MutableArrayMixin 并执行 pushObject 和 removeObject。

但是，如果数组元素是对象，那么如何以某种方式更新对象属性，以便 #each 中的任何 htmlbar 都知道它必须重新呈现自己？

例如，假设我有一些条件 CSS 属性基于 #each.

中的过滤器隐藏

我试过将对象转换为 Ember.Objects 并使用它们的 set/get，但这并没有解决问题。

这是一些示例代码。我想通过 jsbin 向您展示，但无法 https://emberjs.jsbin.com/nobozazazu/edit?html,js,console,output 工作

// within my component
export default Ember.Component.extend({
  items: function() {
    // some AJAX call to retrieve items from provided list of itemIds
    $.get('https://api.guildwars2.com/v2/items', {ids: itemIds.join(',')}).then(function(data) {
      for(var item = 0; item < data.length; item ++) {
        data[item] = Ember.Object.create(data[item])
        data[item].set('count',itemsToCount[data[item].id]);
        data[item].set('hiddenCSS', '');
        itemIdsWithData.push(data[item]);
      }
      this.set('itemData', itemIdsWithData);
    }
  }.property('itemIds'),

  filteredItems: function() {
    var selectedItem = this.get('selected');
    var itemData = this.get('itemData');

    for (var i = 0; i < itemData.length; i++) {
      if (selectedItem !== '' && selectedItem !== null && selectedItem.name === itemData[i].name) {
        itemData[i].hiddenCSS = '';
      }
      else {
        itemData[i].set('hiddenCSS', 'hidden');
      }
    }
    itemData.setObjects(itemData);

    // Verified both in Ember Inspector and with this log that itemData is changed
    console.log(itemData);
    // selected is provided from a top level route
  }.observes('selected')
})

来自我的组件模板即使 ember 检查员验证 item.hidden 已更改，class 并未反映在 html

中

{{#each itemData as |item|}}
  <div class="col-md-3 icon {{item.hidden}}">
    <img class="picture-icon" src= {{item.icon}} alt="Logo"> {{item.name}} x {{item.count}}
  </div>
{{/each}}

请注意，我使用的是版本

Ember 检查员 1.8.2 Ember 1.13.3 Ember 数据 1.13.5 jQuery 1.11.3

TLDR：如果您正在使用 Ember #each，则需要使用 MutableArray 函数，例如 pushObject 和 removeObject。如果您希望 Ember 注意到对象的更改，您需要在数组中使用 Ember.Object 对象并使用 .get 和 .set 执行 sets/gets。

Answer 1

您似乎没有读取模板中的正确值。

您的 JavaScript 设置 hiddenCSS 属性:

itemData[i].set('hiddenCSS', 'hidden');

但是您的模板读取 hidden 属性:

<div class="col-md-3 icon {{item.hidden}}">

试试这个：

<div class="col-md-3 icon {{item.hiddenCSS}}">

此外，如果您尝试直接设置属性，Ember.Objects 将会出错。确保使用集合。

例如，而不是：

itemData[i].hiddenCSS = ''

做

itemData[i].set('hiddenCSS', '')

如何更新 emberjs 数组以便#each 听到更改？

How to update emberjs arrays so #each hears the changes?

arrays

each

ember.js