Polymer 聚合:在dom repeat中的按钮上使用点击处理程序破坏数据绑定
在与dom repeat结合使用时,Polymer的数据绑定功能遇到了一个问题。我想知道为了让这一切顺利,我缺少了什么 在某些情况下,使用repeat元素(例如输入框)时,数据绑定似乎可以正常工作。但是,由于某些原因,在按钮上使用点击事件并在关联项对象上编辑字段似乎不起作用 这是我的SSCE(Plunker:):Polymer 聚合:在dom repeat中的按钮上使用点击处理程序破坏数据绑定,polymer,Polymer,在与dom repeat结合使用时,Polymer的数据绑定功能遇到了一个问题。我想知道为了让这一切顺利,我缺少了什么 在某些情况下,使用repeat元素(例如输入框)时,数据绑定似乎可以正常工作。但是,由于某些原因,在按钮上使用点击事件并在关联项对象上编辑字段似乎不起作用 这是我的SSCE(Plunker:): index.html ========== 测试 单击“切换”按钮在编辑和查看模式之间切换 dummy_element.html ================== 查看模式:{{
index.html
==========
测试
单击“切换”按钮在编辑和查看模式之间切换
dummy_element.html
==================
查看模式:{{item.value}}
编辑模式:
切换
聚合物({
是:'虚拟元素',
特性:{
记录:{
类型:数组,
值:函数(){
返回[
{值:'#1',编辑:false},
{值:'#2',编辑:true},
];
},
},
},
onTap:功能(e){
e、 model.item.editing=!e.model.item.editing;
console.log('Editing:',e.model.item.Editing);
},
});
我的意图:我在切换按钮上的点击处理程序应该在有问题的行的“编辑”标志之间切换为true和false,并且UI应该自动更新以反映更改
发生的情况:虽然底层模型似乎发生了变化,但UI不会被重新绘制
有什么建议吗?有两个问题。首先,在
onTap
处理程序中,需要使用
onTap: function (e) {
this.set("records." +e.model.index +".editing", !e.model.item.editing);
console.log('Editing:', e.model.item.editing);
},
正如Scarygami在评论中指出的那样,e.model
有自己的set
。因此,上述内容也可以简化为:
onTap: function (e) {
e.model.set("item.editing", !e.model.item.editing);
console.log('Editing:', e.model.item.editing);
},
其次,要使数据绑定正常工作,必须依赖本机input
元素
这是一个有效的解决方法。有两个问题。首先,在
onTap
处理程序中,需要使用
onTap: function (e) {
this.set("records." +e.model.index +".editing", !e.model.item.editing);
console.log('Editing:', e.model.item.editing);
},
正如Scarygami在评论中指出的那样,e.model
有自己的set
。因此,上述内容也可以简化为:
onTap: function (e) {
e.model.set("item.editing", !e.model.item.editing);
console.log('Editing:', e.model.item.editing);
},
其次,要使数据绑定正常工作,必须依赖本机input
元素
这里有一个很好的例子,你的叉子可以用。知道输入问题;这就是懒惰。:-)但是正确的聚合物API我不知道。。。看起来我对数据绑定部分略读得有点太轻了。非常感谢。这正是我所需要的。我注意到你只问了关于tap处理程序的问题,但输入的东西吸引了我的眼球,很容易修复。无论如何,我很高兴能帮上忙。两个小提示:
this.set
接受数组,所以你可以this.set(['records',e.model.index',editing'],…)
还有e.model
它自己的set函数,所以你也可以e.model.set('item.editing',…)
@Scarygami我不知道模型中的set
功能。谢谢你指出这一点。这消除了查找数组索引的问题。了解输入问题;这就是懒惰。:-)但是正确的聚合物API我不知道。。。看起来我对数据绑定部分略读得有点太轻了。非常感谢。这正是我所需要的。我注意到你只问了关于tap处理程序的问题,但输入的东西吸引了我的眼球,很容易修复。无论如何,我很高兴能帮上忙。两个小提示:this.set
接受数组,所以你可以this.set(['records',e.model.index',editing'],…)
还有e.model
它自己的set函数,所以你也可以e.model.set('item.editing',…)
@Scarygami我不知道模型中的set
功能。谢谢你指出这一点。这就消除了查找数组索引的问题。