Dynamic components based on state

[andrewreedy]

Is there a way to show a dynamic component based on state? It might eliminate the need for all of the if statements and static tree in the router example, etc.. something like

FamousFramework.scene('andrewreedy:dynamic-test', {
     // The contents of the #right element is dynamic based on the 'right-view' state
    tree: `
        <header-footer>
            <mobile-header id="header">
                <node id="left">
                    <p>Left</p>
                    <button data-action="open-menu">Menu</button>
                </node>
                <node id="center">
                    <h1>Header4</h1>
                </node>
                <node id="right"></node>
            </mobile-header>
            <scroll-view id="body">
                <node class="scroll-view-item" data-action="open-subview"></node>
            </scroll-view>
            <node id="footer">
                <p>Footer</p>
            </node>
        </header-footer>
    `,
    behaviors: {
        '#right': {
            // Linking this element to the component type pulled from the state value 'right-view'
            '$dynamic': 'right-view'
        }
    },
    state: {
        // The component 'top-icon-b' is set in the state here.. this could change to another
        // component and that would be rendered into #right
        'right-view': 'top-icon-b'
    }
})
.config({
    imports: {
        'famous:layouts': ['header-footer', 'scroll-view'],
        'hybrid': ['mobile-header'],
        'andrewreedy': ['top-icon-b']
    }
});

[matthewtoast]

That's pretty interesting. We can definitely look into something like this that makes this type of toggling a bit "sweeter." cc @zackbrown who may want to weigh in on this approach and separation of concerns.

[andrewreedy]

I think I thought of a better way to do this using a component. The approach I illustrated is actually pretty limited. Feel free to close this one.