将聚合物纸张下拉菜单绑定到本地存储

时间：2014-11-20 15:45:18

标签： data-binding drop-down-menu polymer web-component paper-elements

无可否认地看似愚蠢的问题......而且......

在任何人匆忙回复之前，＆＃34; RTFM ，＆＃34;我还没有完全理解它 - 数据绑定。

所以，我有一种形式，它实际上是一个由输入和诸如以及 core-localstorage元素组成的组件。我在会话之间成功地保留了其他输入的值，但我在paper-dropdown-menu上已经模糊了。四通八达...

我想要做的是使用label作为显示值，当machine in machines位进行时，我希望选定的paper-item反映来自本地存储（标签）

哦，这是在玉，顺便说一句。以下是它的看法：

//- JADE

  /** Stuff that works: **/

    core-localstorage(id='storage', name='vbms-user-settings', value='{{settings}}')

    .subhead General
    paper-input(floatingLabel, label='Username', inputValue='{{settings.username}}', on-change='{{updateStorage}}')
    paper-input(floatingLabel, label='Password', inputValue='{{settings.password}}', on-change='{{updateStorage}}', type='password')

    paper-checkbox#vpn_gui_toggle.accent(label='Run Headless', checked, style='margin-right: 16px;')

  /** The confusing input **/

    paper-dropdown-menu#vm_dropdown(valueattr='label', on-core-select='{{updateDefaultVM}}')
        template(repeat="{{machine in machines}}")
            paper-item(label="{{machine.name}}")

这里有一些js ......这很好用;我正在尝试做一些事情＆＃34;教条＆＃34;聚合物方式。

    /*\  JS 
    |*| ...blah blah polymer jank... 
    \*/ 

    objectToStorage: function(obj) {
        this.$.storage.value=obj;
        this.$.storage.save();
    },
    updateStorage: function() {
        this.objectToStorage(this.settings);
    },
    updateDefaultVM: function() {}

有人能引导我找到这个挂断的最简单的解决方案吗？！

提前致谢！

1 个答案:

答案 0 :(得分：2)

我认为使用<paper-dropdown-menu>的推荐方法是根据current docs中的示例，在<paper-item>之间设置两层容器。

如果您正在使用该设置，那么您现在有一个<core-menu>，它继承自<core-selector>。从<core-selector>继承的内容可以使用selected属性来控制选择哪个项目。但<core-selected>默认检查其中包含的任何项是否包含name属性，其值与selected值匹配，因此我们还需要添加name属性所有<paper-item> s。

简单的最终结果，不依赖于加载来自<core-localstorage>的值，如下所示。如果您从<core-localstorage>加载初始值而不是对其进行硬编码，则应该可以执行类似的操作。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer Demo</title>
  </head>
  <body>
    <script src="//www.polymer-project.org/webcomponents.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
    <link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html">
    <link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
    
    <template id="page-template" is="auto-binding">
      <h1>Pastry Menu</h1>
      <paper-dropdown-menu label="Your favorite pastry">
        <paper-dropdown class="dropdown">
          <core-menu class="menu" selected="{{initiallySelected}}">
            <template repeat="{{pastry in pastries}}">
              <paper-item name="{{pastry}}">{{pastry}}</paper-item>
            </template>
          </core-menu>
        </paper-dropdown>
      </paper-dropdown-menu>
    </template>

    <script>
      var pageTemplate = document.querySelector('#page-template');
      pageTemplate.pastries = [
        'Croissant',
        'Donut',
        'Financier',
        'Madeleine'
      ];
      
      // Set this to whatever you want the initially selected item to be. It's value can be loaded from localStorage.
      pageTemplate.initiallySelected = 'Financier';
    </script>
  </body>
</html>

相关问题
最新问题