0

在我的 component.js 中，我正在观察下面的组件属性..

valueObserver : function(){
  console.log('which item changed??')
}.observes('list.@each.isChecked'),

如何找出哪个 Item isChecked 已更改？

完整的组件代码如下

Ember.Component.extend({
  user: undefined,
  list: undefined,
  init: function() {
    this._super();
  },
  visibilityChanged: function() {
    if(this.get('isVisible')) {
      var _this = this;
      var account = this.get('accountService').get('account');

      this.get('user').getLists(account.get('uid'))
        .then(function(response) {
          var items = response.map(function(item) {
            item.isChecked = false
            return item;
          });
           _this.set('list', items);
        });
    }
  }.on('init').observes('isVisible'),

  valueObserver : function(){
    this.get('list').forEach(function(item) {
      if (item.get('isDirty')) {
        // Item has changed
      }
    });
  }.observes('list.@each.isChecked')
});
4

1 回答 1

1

有一种实现类似功能的 hacky 方法 - 如果列表项是 Ember 模型，您可以查找哪些项是“脏的”（即它们的内容已被用户更改但未保存）。

valueObserves: function() {
  this.get('list').forEach(function(item) {
    if (item.get('isDirty')) {
      // Item has changed
    }
  });
}.observes('list.@each.isChecked'),

但是，我不推荐这种方法，因为它会损害不必要的性能，并且用例有限。

相反，正如 Oren 建议的那样，您可能应该在组件中或代替组件中使用诸如集合视图之类的东西。该集合视图将为每个列表项提供一个项目视图。在项目中，您可以观察isChecked并向组件发送操作（或仅调用组件上的方法）并传递项目视图的内容（列表项）。

替代方法

另一种方法是使用操作来设置 isChecked 属性。

{{#each item in list}}
  // This could even be a checkbox with the checked attr bound
  <button {{action 'toggleCheck' item}}>Icon</button>
{{/each}}

这会将项目发送到您的控制器，您可以在其中设置 isChecked 并且您可以立即访问该项目：

Ember.ArrayController.extend({
  actions: {
    toggleCheck: function(item) {
      item.toggleProperty('isChecked');
      // Now do whatever you wanted to do
    }
  }
});
于 2015-02-03T14:48:39.470 回答