我想使用一些 Polymer 纸元素来呈现一个设置页面,该页面将配置数据存储在本地存储中(最终这将进入 Chrome 扩展程序)。这看起来应该很容易。
根据我对this Polymer Data Binding article的理解,我应该能够像这样创建数据绑定(bind):
options.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Options</title>
<!-- Polymer -->
<script src="../bower_components/platform/platform.js"></script>
<link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../bower_components/core-localstorage/core-localstorage.html">
</head>
<body>
<paper-toggle-button checked="{{bar}}"></paper-toggle-button>
<core-localstorage name="foo" value="{{bar}}"></core-localstorage>
</body>
</html>
但是当我使用 Chrome 开发工具检查它时,foo
值并未存储在本地存储中,并且在页面加载之间不会记住切换按钮的选中状态。
如果我正在阅读 paper-toggle-button documentation正确地,我认为已发布 checked 属性,因此我应该能够绑定(bind)它。
我可以确认控制台中没有记录任何错误,paper-toggle-button
和 core-localstorage
元素都出现在 ../bower_components/
文件夹。 paper-toggle-button
确实出现在页面中并在单击时显示动画,这让我觉得元素已加载并正在运行。
我确定我遗漏了一些明显的东西,但我看不到它是什么,而且我以前从未使用过 Polymer,所以我不知道更好。
最佳答案
您不能绑定(bind)到 sibling 。您可以用 auto-binding template element 包装这两个元素或通过自定义元素并将 checked
和 value
绑定(bind)到公共(public)父模型(自动绑定(bind)模板或自定义元素)的字段。
关于html - 与纸张元素和本地存储的 polymer 数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26525209/