Polymer 聚合:在dom repeat中的按钮上使用点击处理程序破坏数据绑定

Polymer 聚合:在dom repeat中的按钮上使用点击处理程序破坏数据绑定,polymer,Polymer,在与dom repeat结合使用时,Polymer的数据绑定功能遇到了一个问题。我想知道为了让这一切顺利,我缺少了什么 在某些情况下,使用repeat元素(例如输入框)时,数据绑定似乎可以正常工作。但是,由于某些原因,在按钮上使用点击事件并在关联项对象上编辑字段似乎不起作用 这是我的SSCE(Plunker:): index.html ========== 测试 单击“切换”按钮在编辑和查看模式之间切换 dummy_element.html ================== 查看模式:{{

在与dom repeat结合使用时,Polymer的数据绑定功能遇到了一个问题。我想知道为了让这一切顺利,我缺少了什么

在某些情况下,使用repeat元素(例如输入框)时,数据绑定似乎可以正常工作。但是,由于某些原因,在按钮上使用点击事件并在关联项对象上编辑字段似乎不起作用

这是我的SSCE(Plunker:):

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
功能。谢谢你指出这一点。这就消除了查找数组索引的问题。