Polymer 1.x：纸张下拉菜单的双向数据绑定_Polymer_Polymer 1.0_Paper Elements_Jsbin

Polymer 1.x：纸张下拉菜单的双向数据绑定

polymer

Polymer 1.x：纸张下拉菜单的双向数据绑定,polymer,polymer-1.0,paper-elements,jsbin,Polymer,Polymer 1.0,Paper Elements,Jsbin,我想在加载时将纸张下拉菜单设置为'Three'。我想通过将纸张下拉菜单的value属性数据绑定到名为item.number的元素的子属性来实现这一点，该属性是在注册元素时设置的。当我尝试使用下面的代码进行此操作时，我看到的结果是纸张下拉菜单显示值为空，而不是读取“三” 哪些代码更改将实现我想要的行为按照以下步骤重现问题注意：下拉菜单显示值的内容为空单击标有“单击以显示项目”的按钮观察控制台打印： [对象]{ 数字：“三” } 理解以上步骤，证明我所期望的行为没有发生在下拉菜单中选择

我想在加载时将

纸张下拉菜单设置为'Three'
。我想通过将纸张下拉菜单的value属性
数据绑定到名为item.number的元素的子属性来实现这一点，该属性是在注册元素时设置的。当我尝试使用下面的代码进行此操作时，我看到的结果是纸张下拉菜单
显示值为空，而不是读取“三”
哪些代码更改将实现我想要的行为
按照以下步骤重现问题

注意：下拉菜单显示值的内容为空
单击标有“单击以显示项目”的按钮
观察控制台打印：
[对象]{
数字：“三”
}

理解以上步骤，证明我所期望的行为没有发生
在下拉菜单中选择数字“四”
单击标有“单击以显示项目”的按钮
观察控制台打印：
[对象]{
数字：“四”
}

了解以上步骤显示单向数据绑定正在元素上工作
我怎样才能达到我想要的行为
http://jsbin.com/loceqayezo/1/edit?html，控制台，输出
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
  <link href="paper-listbox/paper-listbox.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

  <p>
    <button on-tap="show">Click to show item</button>
  </p>

  <paper-dropdown-menu label="Numbers"
                       value="{{item.number}}">
    <paper-listbox class="dropdown-content">
      <paper-item>One</paper-item>
      <paper-item>Two</paper-item>
      <paper-item>Three</paper-item>
      <paper-item>Four</paper-item>
    </paper-listbox>
  </paper-dropdown-menu>


</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        item: {
          type: Object,
          notify: true,
          value: function() {
            return {number: "Three"};
          },
        },
      },
      show: function() {
        console.log('item', this.item);
      },
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>



单击以显示项目

一个
两个
三
四
（功能（）{
聚合物({
是：“x元素”，
特性：{
项目：{
类型：对象，
通知：正确，
值：函数（）{
返回{number:“三”}；
},
},
},
show:function（）{
console.log（'item'，this.item）；
},
});
})();
您的代码无法工作，因为
的value属性是只读的。看
相反，您可以绑定到
。只要做最小的更改，您就必须绑定到下拉列表的元素索引

聚合物({
是：“x元素”，
特性：{
项目：{
类型：对象，
通知：正确，
值：函数（）{
返回{number:2}；
},
},
},
show:function（）{
console.log（'item'，this.item）；
},
});


单击以显示项目

一个
两个
三
四
。