Question

我想使用一些Polymer纸张元素来显示一个设置页面，该页面将配置数据存储在本地存储中（最终将进入Chrome扩展程序）。这看起来应该很容易。

根据我对this Polymer Data Binding article的理解，我应该能够像这样创建数据绑定：

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，我认为已发布已检查的属性，因此我应该可以将其绑定。

我可以确认控制台中没有记录任何错误，paper-toggle-button和core-localstorage元素都存在于../bower_components/文件夹中。 paper-toggle-button确实出现在页面中，并在点击时显示动画，这使我认为元素已加载并正在运行。

我确定我错过了一些明显的东西，但我无法看清楚它是什么，我之前从未使用过聚合物，所以我不知道任何更好。

Answer 1

你无法绑定兄弟姐妹。您可以通过auto-binding template element或自定义元素包装这两个元素，并将checked和value绑定到公共父模型的字段（自动绑定模板或自定义元素））。

聚合物数据与纸张元素和本地存储绑定

1 个答案: