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.
On Sun, Jun 21, 2015 at 11:43 AM, Platinum Industries <
[email protected]> wrote:
> 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.
>
> 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/c5430405-143c-476d-87a3-4707d136978e%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/c5430405-143c-476d-87a3-4707d136978e%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/CADSbU_zAwtLhJKiBu6q%3DMR3AwSF%2BYD7DhyGc3ygs66wm571vLg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
