0

诚然，看似愚蠢的问题......而且......

在任何人匆忙回答“ RTFM ”之前，我还没有完全理解它——数据绑定。

所以，我有一种形式，它实际上是一个由输入和诸如此类的组件组成的组件，也是一个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 ......这很好用；我正在尝试以“教条”的聚合物方式做事。

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

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

谁能引导我找到解决此挂断问题的最简单的解决方案？！

提前致谢！

4

1 回答 1

2

根据当前文档中的示例，我相信推荐的使用方式<paper-dropdown-menu>是在它和 s 之间有两层容器。<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>

于 2014-11-20T21:29:13.787 回答