How to bind object

[mike.r....@gmail.com]

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>

[Rob Dodson]

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

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/787ae588-211d-42b6-940a-1fc04fe7bd14%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[mike.r....@gmail.com]

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. 

[Rob Dodson]

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

[mike.r....@gmail.com]

That works ... thanks Rob!

[Rob Dodson]

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.

[mike.r....@gmail.com]

Thanks Rob ... curious as to why this example only shows one instance of the greeting-tag?

Should their not be two on the page?

[Rob Dodson]

I see two on the page. Just checked on my phone. You may need to refresh jsbin, it can behave strangely at times.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5ce3d157-43a1-466a-a223-8e6e370403c1%40googlegroups.com.

[mike.r....@gmail.com]

Never mind ... my brain is obviously not working on a Friday afternoon ... just one item each in the salutations array