CODEWITHSUNDEEP
htmlpolymer
0x00h
0x00h

Reputation: 790

Polymer data binding with paper elements and local storage

I want to use some of the Polymer paper elements to present a settings page which stores configuration data in local storage (eventually this will go into a Chrome extension). This looks like it should be easy.

From my understanding of this Polymer Data Binding article, I should just be able to create a data binding like this:

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>

But the foo value is not being stored in local storage, when I inspect it with the Chrome dev tools, and the toggle-button's checked status is not remembered between page loads.

If I'm reading the paper-toggle-button documentation correctly, I think that the checked attribute is published, so I should be able to bind it.

I can confirm that no errors are logged in the console and both the paper-toggle-button and core-localstorage elements are present in the ../bower_components/ folder. The paper-toggle-button does appear in the page and animates when clicked, which makes me think that the elements are loaded and running.

I'm sure I'm missing something obvious, but I can't see what it is, and I've never used Polymer before, so I don't know any better.

Upvotes: 2

Views: 1163

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657546

You can not bind to siblings. You can wrap these two elements by an auto-binding template element or by a custom element and bind checked and value to a field of the model of the common parent (auto-binding template or the custom element).

Upvotes: 1

Related Questions