Inside my component.js I am observing on a component property below..
在我的component.js里面，我正在观察下面的组件属性。
valueObserver : function(){
console.log('which item changed??')
}.observes('list.@each.isChecked'),
How do I find out which Item isChecked has changed?
如何找出isChecked哪个项目已更改？
Complete component code is below
完整的组件代码如下
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')
});
1 个解决方案
#1
1
There is a hacky way to achieve similar functionality - if the list item is an Ember model you can look for which items are 'dirty' (i.e. their content has been changed by the user but not saved).
有一种实现类似功能的hacky方法 - 如果列表项是Ember模型，您可以查找哪些项目是“脏”的（即，它们的内容已被用户更改但未保存）。
valueObserves: function() {
this.get('list').forEach(function(item) {
if (item.get('isDirty')) {
// Item has changed
}
});
}.observes('list.@each.isChecked'),
However, I would not recommend that approach as it's an unnecessary performance detriment and has limited use cases.
但是，我不建议使用这种方法，因为这是一种不必要的性能损害，并且用例有限。
Instead, as Oren suggested, you should probably utilize something like a collection view in or in place of your component. That collection view will have an item view for each list item. In the item you can observe isChecked and send an action to the component (or just call a method on the component) and pass the item view's content (the list item).
相反，正如Oren建议的那样，您应该在组件中使用集合视图或代替组件。该集合视图将具有每个列表项的项视图。在项目中，您可以观察isChecked并向组件发送操作（或只是调用组件上的方法）并传递项目视图的内容（列表项）。
Alternative Approach
An alternative would be to use an action to set the isChecked property.
另一种方法是使用动作来设置isChecked属性。
{{#each item in list}}
// This could even be a checkbox with the checked attr bound
<button {{action 'toggleCheck' item}}>Icon</button>
{{/each}}
This will send the item to your controller where you can set isChecked and you have immediate access to the item:
这会将项目发送到您可以设置isChecked的控制器，您可以立即访问该项目：
Ember.ArrayController.extend({
actions: {
toggleCheck: function(item) {
item.toggleProperty('isChecked');
// Now do whatever you wanted to do
}
}
});
#1
1
There is a hacky way to achieve similar functionality - if the list item is an Ember model you can look for which items are 'dirty' (i.e. their content has been changed by the user but not saved).
有一种实现类似功能的hacky方法 - 如果列表项是Ember模型，您可以查找哪些项目是“脏”的（即，它们的内容已被用户更改但未保存）。
valueObserves: function() {
this.get('list').forEach(function(item) {
if (item.get('isDirty')) {
// Item has changed
}
});
}.observes('list.@each.isChecked'),
However, I would not recommend that approach as it's an unnecessary performance detriment and has limited use cases.
但是，我不建议使用这种方法，因为这是一种不必要的性能损害，并且用例有限。
Instead, as Oren suggested, you should probably utilize something like a collection view in or in place of your component. That collection view will have an item view for each list item. In the item you can observe isChecked and send an action to the component (or just call a method on the component) and pass the item view's content (the list item).
相反，正如Oren建议的那样，您应该在组件中使用集合视图或代替组件。该集合视图将具有每个列表项的项视图。在项目中，您可以观察isChecked并向组件发送操作（或只是调用组件上的方法）并传递项目视图的内容（列表项）。
Alternative Approach
An alternative would be to use an action to set the isChecked property.
另一种方法是使用动作来设置isChecked属性。
{{#each item in list}}
// This could even be a checkbox with the checked attr bound
<button {{action 'toggleCheck' item}}>Icon</button>
{{/each}}
This will send the item to your controller where you can set isChecked and you have immediate access to the item:
这会将项目发送到您可以设置isChecked的控制器，您可以立即访问该项目：
Ember.ArrayController.extend({
actions: {
toggleCheck: function(item) {
item.toggleProperty('isChecked');
// Now do whatever you wanted to do
}
}
});