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] <javascript:>>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] <javascript:>.
>> 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/b383b7cc-ba2d-4f58-b437-68119ca2d7bb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to