html - 与纸张元素和本地存储的 polymer 数据绑定(bind)

标签 html polymer

我想使用一些 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-buttoncore-localstorage 元素都出现在 ../bower_components/ 文件夹。 paper-toggle-button 确实出现在页面中并在单击时显示动画,这让我觉得元素已加载并正在运行。

我确定我遗漏了一些明显的东西,但我看不到它是什么,而且我以前从未使用过 Polymer,所以我不知道更好。

最佳答案

您不能绑定(bind)到 sibling 。您可以用 auto-binding template element 包装这两个元素或通过自定义元素并将 checkedvalue 绑定(bind)到公共(public)父模型(自动绑定(bind)模板或自定义元素)的字段。

关于html - 与纸张元素和本地存储的 polymer 数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26525209/

相关文章:

asp.net-core - 发布 polymer + ASP.NET Core

javascript - React 如何设置组件 id 以便能够使用 document.getElementById()

javascript - 如何在单击时将文本更改为文本框

javascript - 根据第一次选择从数据库中填充

html - 让 c++ 程序调用 html 函数/事件监听器

css - 我可以将 CSS 预处理器与 Polymer 一起使用吗?

javascript - 切换纸张按钮的禁用属性

html - 将 <button> 替换为 Font Awesome 图标

javascript - 如何编写悬停导航栏使其仅在您开始滚动时出现

javascript - 使用 Firebase-util 连接表时,Firebase 事件未正确触发