Question

我的问题是每行的最后<td>都有一个带有编辑按钮的表。按下编辑后，<td>将更改为<input> s，这非常合适。我的按钮看起来像这样：

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

因此，当按下它时，将调用editThis函数。但我希望我的按钮现在会显示＆＃34; Save＆＃34;如果按下应该调用＆＃34; saveThis＆＃34;功能

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();
   /* ... 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 2

我认为最简单的方法是在元素模型中建立状态，如@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>

Answer 3

自己找到解决方案：）

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

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

3 个答案: