使用数据绑定的聚合物芯-支架变更工具

Polymer core-scaffold change tool using data binding

本文关键字：工具 -支 数据绑定 聚合物      更新时间：2023-09-26

我在我的网站上使用聚合物，更具体地说是核心支架。

下面是我编写的一些示例代码: 
<core-scaffold>
  <core-header-panel navigation flex mode="seamed">
    <core-toolbar>Application</core-toolbar>
    <core-menu theme="core-light-theme">
      <core-item icon="settings" label="item1"></core-item>
      <core-item icon="settings" label="item2"></core-item>
    </core-menu>
  </core-header-panel>
  <div tool>Title</div>
  <div>Content goes here...</div>
</core-scaffold>
<script>
  var menuItems = document.querySelector("core-menu");
  menuItems.addEventListener("core-select", function(){
    console.log(menuItems.selected);
  });
</script>

我想要的是，在点击core-menu中的core-item时，<div tool>Title</div>的内容相应改变。我已经能够将事件侦听器附加到按钮的选择中，但是我不太知道如何使工具保持最新。聚合物有双向数据绑定，我还没有完全掌握。

那么，用按下的菜单项标签更新tool -div的最建议的方法是什么?

使用双向数据绑定可以轻松完成此任务。<core-menu>公开了一个可以绑定的selectedItem属性。要获得数据绑定，你可以手动设置绑定模板，但你可能只想让你的应用本身成为一个组件。像这样:

<my-app></my-app>
<polymer-element name='my-app'>
  <template>
    <core-scaffold>
      <core-header-panel navigation flex mode="seamed">
        <core-toolbar>Application</core-toolbar>
        <core-menu theme="core-light-theme" selectedItem='{{item}}'>
          <core-item icon="settings" label="item1"></core-item>
          <core-item icon="settings" label="item2"></core-item>
        </core-menu>
      </core-header-panel>
      <div tool>{{item.label}}</div>
      <div>Content goes here...</div>
    </core-scaffold>
  </template>
  <script>
    Polymer('my-app', {
    });
  </script>
</polymer-element>
相关文章：