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.
For more options, visit https://groups.google.com/d/optout.
