我想在加载时将paper-dropdown-menu
设置为'Three'
的值。我想通过数据绑定paper-dropdown-menu
的value属性到名为item.number
的元素的子属性来实现这一点,该属性在注册元素时设置。当我使用下面的代码尝试这个时,我看到的结果是paper-dropdown-menu
显示的值只是空白而不是读“三”。
哪些代码更改将实现我想要的行为?
按照以下步骤重现问题。
[object Object] { 第三” }
[object Object] { 排名第四” }
我如何实现我想要的行为?
http://jsbin.com/loceqayezo/1/edit?html,console,output<!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>
答案 0 :(得分:2)
您的代码无效,因为<paper-dropdown-menu>
的value属性是只读的。请参阅documentation。
相反,您可以绑定到<paper-listbox selected>
。只需进行少量更改,您就必须绑定到dropdown的元素索引。
Polymer({
is: "x-element",
properties: {
item: {
type: Object,
notify: true,
value: function() {
return {number: 2};
},
},
},
show: function() {
console.log('item', this.item);
},
});
<!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">
<paper-listbox class="dropdown-content"
selected="{{item.number}}">
<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>
</dom-module>
<x-element></x-element>
</body>
要在item
中保留全名,您可以为可选元素添加属性,并使用attrForSelected
的{{1}}属性。
paper-listbox
Polymer({
is: "x-element",
properties: {
item: {
type: Object,
notify: true,
value: function() {
return {number: "Three"};
},
},
},
show: function() {
console.log('item', this.item);
},
});