polymer 1.0 data binding not working as expected

[Platinum Industries]

I have a custom element system-menu that looks like this::

<dom-module id="system-menu"> <template> <template is="dom-repeat" items="{{data}}"> <li>{{item.name}}</li> </template> </template> </dom-module> <script> (function() { Polymer({ is: 'system-menu', behaviors: [ Polymer.IronMenubarBehavior ], ready: function() { console.log(this.data); } }); })(); </script>

Now, after importing, I use it like this::

<system-menu class="list flex horizontal end-justified layout" data='{{data}}'></system-menu>

Notice that {{data}} is a json encoded string. I pass that string to my element to be used to populate it. So how do I catch that json string in my element and use it in a dom-repeat template.

[Arthur Evans]

So, I wrote this long response to your question, and then re-read your question and realized you might be asking something completely different. So I'll turn this into a choose-your-own-adventure.

1. Is the system-menu.data property not getting set at all? 

    Yes. Go to 2.

    No. Go to 1.1.

1.1. Is the system-menu.data property is getting set, but you're getting a string instead of an object? 

    Yes. Go to 3.

    No. Go to 1.2.

1.2. I don't think I understand the question. Can you explain the problem you're seeing?

2. Is the <system-menu> line (shown above) inside a polymer element's local DOM template, or inside a dom-bind template?

    Yes. Go to 2.1.

    No, it's hanging out in the main document. Go to 3.

    

2.1 Is the data property is defined in the binding scope (that is, the dom-bind template or the element that hosts the system-menu has a property named data).

3. So, in this case, the problem is that you have a data binding annotation in a place where it won't work.

Configuring an element from markup and data binding to a property are different things, unfortunately they look very similar.

Configuring (a.k.a. deserializing attribute values)

=====================================

Configuring an element from markup initializes a property using a string value. The element must have the property defined correctly in its prototype:

    properties: {

       data: {

         type: Object

       }

    }

Then you can pass in a JSON encoded object in markup, like this:

    <my-element data='{ "one": "value", "another": "value" }'></my-element>

This initializes the my-element instance's data property with a JavaScript object like this:

    { one: "value", another: "value" }

Note that we're not using the double brackets ({{}} or [[]]) here, which indicate a data binding annotation. You can use this kind of static initialization anywhere, including in the main document, outside of a Polymer element or dom-bind template. (For more on deserializing attribute values, see: https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-deserialization)

Data binding

==========

Data binding uses the double brackets surrounding a property, path, or computed binding to bind to the property:

    <my-element data="{{myData}}"></my-element>

This sets data to myData. Provided that you use the appropriate methods to update myData, 

changes are propagated to my-element. Note that in this case, you're not JSON-encoding anything.

Both data and myData are pointing to a real, live JavaScript object.

(https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#property-binding)

Data binding can only be used 1) inside a Polymer element's local DOM template, or 2) inside a dom-bind template. The myData is interpreted in the current binding scope. In the general case the binding scope is either the host element, or the dom-bind template where the markup appears. 

(If there are dom-repeat templates nested inside the element or dom-bind, they modify the binding scope -- see https://www.polymer-project.org/1.0/docs/devguide/templates.html#nesting-templates.)

Hope this helps.

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/c5430405-143c-476d-87a3-4707d136978e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Arthur Evans]

Oops. Hit send to soon. 2.1 should read:

2.1 Is the data property is defined in the binding scope (that is, the dom-bind template or the 

      element that hosts the system-menu has a property named data)?

    Yes. OK, that's strange. It should work, need more information to diagnose.

    No. Well, that's your problem then.