关于聚合物的简单问题

时间:2014-09-05 17:10:43

标签: polymer

我开始使用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,但我只得到旧价值。

可能是我选错了方法。我希望通过简单的菜单切换页面来获得一些“页面”。

1 个答案:

答案 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-menucore-pages是数据绑定的,但更好的描述是core-menu和{{1}数据绑定到core-pages。主持人my-element处于控制之中(因此控制器 [或者更确切地说,可能是MVP模式中的演示者])并且孩子们不会互动彼此直接。