如何更改飞镖中按钮的单击事件

我遇到了在每行的最后一个<td>中有一个带有编辑按钮的表格的问题。当编辑按下时，<td> s更改为<input> s，这很好。我的按钮看起来是这样的：如何更改飞镖中按钮的单击事件

<td><button on-click="{{editThis}}">Edit</button></td>

所以其按下时，该editThis函数将被调用。但我想我的按钮现在将显示“保存”，如果按下应调用“saveThis”功能。

void editThis(Event e, var detail, Node sender) { 
    e.preventDefault(); 
    /* ... does not matter ... */ 

    (sender as ButtonElement).text = "Save"; 
    (sender as ButtonElement).setAttribute("on-click", {{saveThis}}); 
}

该按钮仍然会调用editThis函数。 Dartium显示此：

<button on-click="{{saveThis}}">Save</button>

任何想法为什么它不工作或另一种方式如何解决这个问题？

来源

2014-10-08 Azael

自己找到解决方案:)

void editThis(Event e, var detail, Node sender) { 
    e.preventDefault(); 
    print("edit called"); 

    /* Does not matter */ 

    ButtonElement newButton = new ButtonElement(); 
    newButton.text = "Save"; 
    newButton.onClick.listen((event) => saveThis()); 
    sender.replaceWith(newButton); 
    }

来源

2014-10-10 06:47:17 Azael

您可以在一个单一的点击功能同时处理点击：

void editThis(Event e, var detail, Node sender) { 
    e.preventDefault(); 
    /* ... does not matter ... */ 

    var button = (sender as ButtonElement); 
    if(button.text == "Save") { 
    // Do save action 
    button.text = "Edit"; 
    } else if (button.text == "Edit") { 
    // Do edit action 
    button.text = "Save"; 
    } 
}

来源

2014-10-08 14:40:06

那么，这将工作我猜。但我不喜欢该函数通过按钮上的文本处理Button的被调用函数。这应该是在点击属性 – Azael 2014-10-08 15:19:33

我认为最简单的方法是有一个状态在你的元素，比如@observable bool isEdit = false;模型，然后使用

<td> 
    <template if="{{isEdit}}"> 
    <button on-click="{{editThis}}">Edit</button> 
    </template> 
    <template if="{{!isEdit}}"> 
    <input type="text"><button on-click="{{saveThis}}">Save</button> 
    </template> 
</td>

来源

2014-10-08 14:41:13

td和模板标签不工作在一起不幸的工作。它是一个已知的问题。浏览器会忽略td。这是我的实际问题，所以我在Polymer中创建了一个扩展的td标签，所以我可以在不使用表格内的模板标签的情况下更改我的td标签 – Azael 2014-10-08 15:12:59

我修改了我的答案。您的问题没有包含足够的信息来查看您尝试使用它的方式/位置。 – 2014-10-08 15:15:13

由于每个tr都有一个编辑按钮，所有按钮都会改变。我也认为模板标签甚至不能在表格内工作 – Azael 2014-10-08 15:28:07

如何更改飞镖中按钮的单击事件

回答

相关问题