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.
On Wed, Jun 24, 2015 at 8:28 AM, Arthur Evans <[email protected]> wrote:
> 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_yTirSY3HXfP1JN3NxHZU%3DgULPZ7wNtnCnzdJ2Fq3HfTQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
