Question

在SPA的背景下，我希望有3种不同的观点＆＃39; （因为缺少一个更好的词）。第一个是可以应用于大型餐馆列表的一组过滤器，第二个是过滤餐馆的列表，第三个是在地图上绘制位置。

到目前为止我能找到的所有演示基本上只是在切换标签时在同一个模板中显示不同的内容，而我想在每个模板和内容上使用非常不同的模板和内容（https://github.com/Polymer/docs/blob/master/0.5/elements/demo-tabs.html是最接近的我＆＃39到目前为止已发现了。）

根据评论中的输入，我现在有

<body unresolved>
    <core-scaffold>
        <core-header-panel>
            <core-toolbar>
                <text-span>
                    AF Mobile
                </text-span>
                <paper-input></paper-input>
            </core-toolbar>
            <core-toolbar>
                <paper-tabs id="tabs" selected="list" self-end>
                    <paper-tab name="criteria">Criteria</paper-tab>
                    <paper-tab name="list">List</paper-tab>
                    <paper-tab name="map">Map</paper-tab>
                </paper-tabs>
            </core-toolbar>
            <core-pages selected="list" valueattr="hash">
                <div hash="list" class="container" layout vertical center>
                    <resto-list show="all"></resto-list> 
                </div>
                <div id="mapHolder" hash="map">
                    <google-map latitude="37.77493" longitude="-122.41942"></google-map>
                </div>
            </core-pages>
        </core-header-panel>

    </core-scaffold>

<script>
    var tabs = document.querySelector('paper-tabs');
    var pages = document.querySelector('core-pages');

    tabs.addEventListener('core-select', function() {
        console.log("Selected: " + tabs.selected);
        pages.selected = tabs.selected;
    });

</script>

Answer 1

见https://stackoverflow.com/questions/23867304/single-page-app-architecture-with-polymer。

该页面上的演示演示了如何使用core-pages来实现您的目标。核心页面的每个子元素都是您不同的内容。然后，您可以将纸质标签的selected属性数据绑定到核心页面的selected属性。

在标签更改上加载不同的组件

1 个答案: