I see two on the page. Just checked on my phone. You may need to refresh
jsbin, it can behave strangely at times.
On Mar 21, 2014 12:25 PM, <[email protected]> wrote:
> Thanks Rob ... curious as to why this example only shows one instance of
> the greeting-tag?
>
> Should their not be two on the page?
>
>
> On Friday, March 21, 2014 2:02:13 PM UTC-4, Rob Dodson wrote:
>>
>> 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]:
>>>>>
>>>>> 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/5ce3d157-43a1-466a-a223-8e6e370403c1%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/5ce3d157-43a1-466a-a223-8e6e370403c1%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/CAJj5OwDZbyO6Fw5Mz%3DdeJcHfJ_TQMmrDdbPnB6W%2BKhzj3f7eGQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
