我开始使用Polymer。这很棒。感谢所有参与者。
我有核心菜单和核心页面元素。
<polymer-element name="my-element">
<template>
<style>
</style>
<core-menu selected="0" id="core_menu">
<core-item on-tap="{{sel_brosh}}" label="Broshura"></core-item>
<core-item on-tap="{{sel_list}}" label="Listovka"></core-item>
</core-menu>
<core-pages selected="0" id="sec_pages">
<section id="sec_brosh">Page One</section>
<section id="sec_list">Page Two</section>
</core-pages>
</template>
<script>
Polymer('my-element', {
sel_brosh: function () { this.$.sec_pages.selected = "0"; },
sel_list: function () { this.$.sec_pages.selected = "1"; },
});
</script>
</polymer-element>
它按我的意愿工作,但我认为这不是'最佳实践'。我怎样才能使用一个功能?我试图获得这个价值。$。core_menu.selected,但我只得到旧价值。
可能是我选错了方法。我希望通过简单的菜单切换页面来获得一些“页面”。
答案 0 :(得分:4)
试试这个:
<polymer-element name="my-element">
<template>
<core-menu selected="{{selected}}">
<core-item label="Broshura"></core-item>
<core-item label="Listovka"></core-item>
</core-menu>
<core-pages selected="{{selected}}">
<section>Page One</section>
<section>Page Two</section>
</core-pages>
</template>
<script>
Polymer({
selected: 0
});
</script>
</polymer-element>
ProTip:Polymer的MVC概念是my-element
有一个数据模型通知它的孩子。我之所以提到这一点是因为很容易看到这一点并说哦,core-menu
和core-pages
是数据绑定的,但更好的描述是core-menu
和{{1}数据绑定到core-pages
。主持人my-element
处于控制之中(因此控制器 [或者更确切地说,可能是MVP模式中的演示者])并且孩子们不会互动彼此直接。