Data binding 聚合物1.x:数据绑定到子属性
我想数据绑定到对象的子属性 我希望看到我的输出随着选择不同的菜单项而改变。但是,我在输出中没有看到响应 要重新创建问题,请执行以下步骤Data binding 聚合物1.x:数据绑定到子属性,data-binding,polymer,polymer-1.0,Data Binding,Polymer,Polymer 1.0,我想数据绑定到对象的子属性 我希望看到我的输出随着选择不同的菜单项而改变。但是,我在输出中没有看到响应 要重新创建问题,请执行以下步骤 请注意,两个输出(Dom repeat和Computed)都正确反映了所选菜单项“bar”和“qux” 选择(或取消选择)菜单项 请注意,Dom repeat响应正确 ❌ 请注意,Computed根本没有响应 是什么代码使计算的响应所选子属性对象中的更改 http://jsbin.com/piheyivofu/edit?html,输出 <!doctype
对象中的更改
http://jsbin.com/piheyivofu/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="paper-menu/paper-menu.html" rel="import">
<link href="paper-item/paper-item.html" rel="import">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
iron-selector > * {
padding: 8px;
}
.iron-selected {
background-color: blue;
color: white;
}
</style>
<br><br>
<paper-menu multi attr-for-selected="name" selected-values="{{ob.selected}}">
<paper-item name="foo" >Foo</paper-item>
<paper-item name="bar" >Bar</paper-item>
<paper-item name="baz" >Baz</paper-item>
<paper-item name="qux" >Qux</paper-item>
<paper-item name="quux">Quux</paper-item>
</paper-menu>
<p>
<strong>Dom-repeat</strong>:
<template is="dom-repeat" items="{{ob.selected}}">
<span>[[item]] </span>
</template>
</p>
<p><strong>Computed</strong>: {{str}}</p>
</template>
<script>
Polymer({
is: 'x-element',
properties: {
ob: {
type: Object,
value: function() {
return {
selected: ['bar', 'qux'],
}
}
},
str: {
type: String,
computed: '_computeStr(ob)',
}
},
_computeStr: function(temp) { // Doesn't respond to changes in temp.selected
return temp.selected.join(', ');
},
});
</script>
</dom-module>
</body>
铁选择器>*{
填充:8px;
}
.铁被选中{
背景颜色:蓝色;
颜色:白色;
}
福
酒吧
巴兹
库克斯
库克斯
Dom repeat:
[[项目]]
计算的:{{str}
聚合物({
是‘x元素’,
特性:{
ob:{
类型:对象,
值:函数(){
返回{
所选:['bar','qux'],
}
}
},
str:{
类型:字符串,
计算:“_computeStr(ob)”,
}
},
_computeStr:函数(temp){//不响应所选temp中的更改
返回所选的临时联接(',');
},
});
理解这一点很重要对象标识. 今天,Polymer认为物体的价值就是它的身份。如果x==2,并且我设置了x=4,那么x已经改变了值。如果ob={foo:3},并且我设置ob.foo=4,则ob具有不 已更改的值(其标识未更改),并且此更改不会触发对ob
的观察
相反,我们可以直接观察ob.foo
,或者通过ob.*
观察ob的所有子属性,或者,如果它是一个数组,则观察ob的长度(ob.length
)。
类似的方法会起作用,例如:
str: {
type: String,
computed: '_computeStr(ob, ob.*)',
}
},
_computeStr: function(temp, info) {
return temp.selected.join(', ');
},
这是有效的,因为我已经要求得到通知,如果ob的子属性 改变这是ob.
为观察ob.
而返回的信息
包含有关ob发生了什么的信息了解这一点很重要对象标识. 今天,Polymer认为物体的价值就是它的身份。如果x==2,并且我设置了x=4,那么x已经改变了值。如果ob={foo:3},并且我设置ob.foo=4,则ob具有不 已更改的值(其标识未更改),并且此更改不会触发对ob
的观察
相反,我们可以直接观察ob.foo
,或者通过ob.*
观察ob的所有子属性,或者,如果它是一个数组,则观察ob的长度(ob.length
)。
类似的方法会起作用,例如:
str: {
type: String,
computed: '_computeStr(ob, ob.*)',
}
},
_computeStr: function(temp, info) {
return temp.selected.join(', ');
},
这是有效的,因为我已经要求得到通知,如果ob的子属性 改变这是ob.
为观察ob.*
而返回的info
包含有关ob发生了什么的信息