Never mind ... my brain is obviously not working on a Friday afternoon ... just one item each in the salutations array
On Friday, March 21, 2014 3:25:48 PM UTC-4, [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/20b8b1f1-b6cb-4ae5-a5b5-682f37863a21%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
