如何在 Dart 中更改按钮的点击事件

Question

我的问题是在每行的最后一个<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>

任何想法为什么它不起作用或如何解决这个问题？

Answer 1

自己找到了解决方案:)

    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);
  }

Answer 2

您可以在单击功能中处理两次点击：

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";
   }
}

Answer 3

我认为最简单的方法是在您的元素模型中设置一个状态，例如 @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>