erikringsmuth / app-router

Router for Web Components
https://erikringsmuth.github.io/app-router/
MIT License
610 stars 83 forks source link

how to init custom element model with app-router? #74

Closed Colstuwjx closed 9 years ago

Colstuwjx commented 9 years ago

Hi, I'm new to polymer and app-router, and I want to just use these two to build an awesome app!

Unfortunately, I still don't know how to init custom element model with app-router. Just like a sample like:

        <!-- app-router element -->
        <app-router>
            <app-route path="/" import="/static/Gaea/elements/gaea-scaffold.html" element="gaea-scaffold" bindRouter>
            </app-route>
        </app-router>

        ...

        Polymer('gaea-router', {
            features: {...},
            username: test_user,
            another model ..

        <!-- custom element gaea-scaffold -->
        <gaea-scaffold>
        <template>
                <p>this is user {{ username }}, jsondata: {{ features }}</p>
        </template>
        </gaea-scaffold>

How to bind these model data to custom element?? I find the issue #34 , but it's not very detail.

http://erikringsmuth.github.io/app-router/#/databinding/1337?queryParam1=Routing%20with%20Web%20Components!

Is there a polite way to complete this? Could you pls give me a more detailed demo? Many Thanks!!!

erikringsmuth commented 9 years ago

Passing models from the outside element gaea-router into the element gaea-scaffold isn't simple but can be done.

This example of the before-data-binding might be close to what you're looking for. https://erikringsmuth.github.io/app-router/#/events#polymer-event-mapping

The other way is using Polymer's templateInstance.model property which is bound to every element in a Polymer custom element. https://erikringsmuth.github.io/app-router/#/databinding/#accessing-the-parent-scope

Colstuwjx commented 9 years ago

Thks a lot, I just use before-data-binding to fix this problem!!