我正在使用 Polymer在我的网站上,更具体地说是 Core-Scaffold .
这是我编写的一些示例代码:
<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-item
来自 core-menu
, 即 <div tool>Title</div>
内容相应变化。我已经能够将事件监听器附加到按钮的选择上,但我不太清楚如何使该工具保持最新状态。 polymer 具有双向作用data binding我还没有完全掌握。
那么,更新 tool
的最推荐方法是什么? -div 与按下的菜单项标签?
最佳答案
您可以使用两种方式的数据绑定(bind)轻松完成此操作。 <core-menu>
exposes a selectedItem
attribute你可以绑定(bind)。要获得数据绑定(bind),您可以手动设置绑定(bind)模板,但您可能只想让您的应用程序本身成为一个组件。像这样:
<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>
关于javascript - 使用数据绑定(bind)的 polymer 核心支架更改工具,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24834378/