Hey Mike,
Another thing to note: since salutations is an exposed property of the
element you can also set it externally using javascript.
<script>
document.addEventListener('polymer-ready', function() {
var greeting = document.querySelector('greeting-tag');
greeting.salutations = [{what: "Sup", who: "Dude"}];
});
</script>
Here's an example which demonstrates both
approaches.<http://jsbin.com/cabac/5/edit>
On Friday, March 21, 2014 7:58:07 AM UTC-7, [email protected] wrote:
>
> That works ... thanks Rob!
>
> On Thursday, March 20, 2014 5:48:19 PM UTC-4, Rob Dodson wrote:
>>
>> 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/96625c83-4cbd-4464-8ea5-66f0ec5900ac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
