How to use mdv in custom element?

[BINLEI XUE]

How can I get something like this?

<element name="side-bar">
    <ul>
        <template id="id" repeat="{{ brands }}">
            <li>
                <a href="#">{{ brand }}</a>
                <ul>
                    <template repeat="{{ kinds }}">
                        <li>
                            <a href="#">{{ kind }}</a>
                        </li>
                    </template>
                </ul>
            </li>
        </template>
    </ul>
    </div>
    <script>
        Polymer.register(this, {
            ready: function () {
                $.id.model = { brand: [
                    {
                        brand: 'A',
                        kinds: [{ kind: 'A1' }, { kind: 'A2' }, { kind: 'A3' }]
                    },
                    {
                        key: 'B',
                        kinds: [{ kind: 'B1' }, { kind: 'B2' }, { kind: 'B3' }]
                    },
                    {
                        key: 'C',
                        kinds: [{ kind: 'C1' }, { kind: 'C2' }, { kind: 'C3' }]
                    }
                ]};
            }
        });
    </script>
</element>

[Eric Bidelman]

I've got your example working with a few typo-fixes:

1. The internal guts of a Polymer element need to be wrapped in an outer <template>. Your element's Shadow DOM is created from this outer template. Inside, you can use other templates with MDV.

http://www.polymer-project.org/polymer.html#initializing-polymer-elements

 

2. $.id.model ->  this.$.id.model. Note the |this| in front.

http://www.polymer-project.org/polymer.html#automatic-node-finding

3. {{ brand }} -> {{ brands }}

http://jsbin.com/asavoy/2/edit

Also note, if you expose the "brands" array as a property on your element, you can bind to it from within the element, but also let users alter the data model from the outside. Not sure if that's what you want though.

http://jsbin.com/ikifip/1/edit

Eric

--
 
---
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.
Visit this group at http://groups.google.com/group/polymer-dev.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/af614413-a31b-4083-bdd4-76966bc261be%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.