javascript - Polymer - How do I attach an observer to an array? - Stack Overflow

admin管理员组

文章数量:1394060

How do I attach an observer to a polymer attribute that is an array? To be clear, I want callbacks when items in the array change. For simplicity, let's say my array is:

[
    { text: 'foo' },
    { text: 'bar' }
]

I want something like:

observe : {
    'items.text' : 'itemsChanged'
}

The following works, but is obviously un-sustainable:

observe : {
    'items[0].text' : 'itemsChanged',
    'items[1].text' : 'itemsChanged'
}

Note that in my case, the changes are ing from another polymer element that I have control over. So if I could somehow trigger a change from the element that has control over { text: 'foo' }, that would work as well.

How do I attach an observer to a polymer attribute that is an array? To be clear, I want callbacks when items in the array change. For simplicity, let's say my array is:

[
    { text: 'foo' },
    { text: 'bar' }
]

I want something like:

observe : {
    'items.text' : 'itemsChanged'
}

The following works, but is obviously un-sustainable:

observe : {
    'items[0].text' : 'itemsChanged',
    'items[1].text' : 'itemsChanged'
}

Note that in my case, the changes are ing from another polymer element that I have control over. So if I could somehow trigger a change from the element that has control over { text: 'foo' }, that would work as well.

• javascript
• polymer

Share Improve this question Follow asked Jul 8, 2014 at 18:48 user578895user578895

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

To be clear, Polymer will automatically observe Arrays, but an 'ArrayObserver' will only tell you if (a) the Array itself is replaced or (b) items are added, removed, or rearranged. Just like observed objects, Polymer does not automatically observe properties of sub-objects.

the changes are ing from another polymer element that I have control over

This is usually the case and we typically have the element doing the changing fire an event for munication.

Kinda late, but because the question ranks quite high on google and none of the above is really helping, here is my solution:

Polymer ships with observe.js and this helps solving your problem.

The basic version would be to use the ArrayObserver but this only fires when the array gets altered, meaning when elements are added, removed and i guess also when you replace an entry. But this won't help if you wanna observe changes to object properties in an array - such as in your case.

Here it's better to use the CompoundObserver and add all paths via addPath or addObserver(new PathObserver(obj, '...')). But you have to iterate over the whole array and add all observed properties in a loop for instance.

You can use Object.observe() to acplish this. e.g.:

ready: function() {
    Object.observe(this.items, this.myObserver);
}
myObserver: function (changes){
    changes.forEach(function(change, i){
        console.log('what property changed? ' + change.name);
        console.log('how did it change? ' + change.type);
        console.log('whats the current value? ' + change.object[change.name]);
        console.log(change); // all changes
    });
},

More here.

There is a documentation for this

Observe array mutations

本文标签： javascriptPolymerHow do I attach an observer to an arrayStack Overflow