propertyChanged handlers will still work:
<polymer-element name="greeting-tag" attributes="salutations">
<template>
<ul>
<template id="greeting" repeat="{{s in salutations}}">
<li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
</template>
</ul>
</template>
<script>
Polymer('greeting-tag', {
created: function() {
this.salutations = [];
},
salutationsChanged: function(oldVal, newVal) {
console.log(newVal); // shows 2 objects
}
});
</script>
</polymer-element>
Example: http://jsbin.com/noxij/21/edit
On Thursday, March 20, 2014 2:38:02 PM UTC-7, [email protected] wrote:
>
> Thanks Rob ... that works
>
> A follow up question ... how do I add property change notification on
> salutations in this instance?
>
> I know that for simple properties, I can do a propertyChanged event
>
> How does that work for objects/array of objects?
>
> much appreciated.
>
>
> On Thursday, March 20, 2014 5:04:36 PM UTC-4, Rob Dodson wrote:
>>
>> Hey Mike,
>>
>> This one was actually a little tricky :)
>>
>> So you *can* pass in an Array of values but there are two gotchas:
>>
>> 1. You've got to do it using the created callback, not ready
>> 2. You've got to use valid JSON style quotes for your keys and values.
>>
>> Here's a solution for you:
>>
>> <polymer-element name="greeting-tag" attributes="salutations">
>> <template>
>> <ul>
>> <template id="greeting" repeat="{{s in salutations}}">
>> <li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
>> </template>
>> </ul>
>> </template>
>> <script>
>> Polymer('greeting-tag', {
>> created: function() {
>> this.salutations = [];
>> }
>> });
>> </script>
>> </polymer-element>
>>
>> <!-- Note, you've got to use valid JSON style for the quotes -->
>> <greeting-tag salutations='[{"what": "Sup", "who": "Dude"}, {"what":
>> "Hi", "who": "Rob"}]'>
>> </greeting-tag>
>>
>> Example jsbin: http://jsbin.com/noxij/17/edit
>>
>>
>> On Thu, Mar 20, 2014 at 11:09 AM, <[email protected]> wrote:
>>
>>> In the example below, how do I expose a property/attribute that takes
>>> salutations as an object (array in this case)? Basically I want to be able
>>> to get/set saluations on the element from the host page?
>>>
>>> <polymer-element name="greeting-tag">
>>> <template>
>>> <ul>
>>> <template id="greeting" repeat="{{s in salutations}}">
>>> <li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
>>> </template>
>>> </ul>
>>> </template>
>>> <script>
>>> Polymer('greeting-tag', {
>>> ready: function() {
>>> this.salutations = [
>>> {what: 'Hello', who: 'World'},
>>> {what: 'GoodBye', who: 'DOM APIs'},
>>> {what: 'Hello', who: 'Declarative'},
>>> {what: 'GoodBye', who: 'Imperative'}
>>> ];
>>> }
>>> });
>>> </script></polymer-element>
>>>
>>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>>> ---
>>> You received this message because you are subscribed to the Google
>>> Groups "Polymer" group.
>>> To unsubscribe from this group and stop receiving emails from it, send
>>> an email to [email protected].
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msgid/polymer-dev/787ae588-211d-42b6-940a-1fc04fe7bd14%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/787ae588-211d-42b6-940a-1fc04fe7bd14%40googlegroups.com?utm_medium=email&utm_source=footer>
>>> .
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/012516d9-510c-4dc1-87b4-844012346118%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
