Как изменить событие нажатия кнопки в Dart

У меня проблема в том, что у меня есть таблица с кнопкой редактирования в последней <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>

Любые идеи, почему это не работает или другой способ решить эту проблему?


dart dart-html dart-polymer
person Azael    schedule 08.10.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Сам нашел решение :)

    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);
  }
person Azael    schedule 10.10.2014

arrow_upward
1
arrow_downward

Вы можете обрабатывать оба клика в одной функции клика:

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";
   }
}
person Pixel Elephant    schedule 08.10.2014
comment
Ну, это сработает, я думаю. Но мне не нравится, что функция обрабатывает вызываемую функцию кнопки по тексту на кнопке. Это должно быть заданием атрибута on-click. - person Azael; 08.10.2014

arrow_upward
1
arrow_downward

Я думаю, что самый простой способ - иметь статус в вашей модели элементов, например @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>
person Günter Zöchbauer    schedule 08.10.2014
comment
td и тег шаблона, к сожалению, не работают вместе. Это известная проблема. td будет игнорироваться браузером. Это была моя реальная проблема, поэтому я создал расширенный тег td в Polymer, поэтому я могу изменить свой тег td без использования тегов шаблона в таблице. - person Azael; 08.10.2014
comment
Я немного изменил свой ответ. В вашем вопросе недостаточно информации, чтобы понять, как и где вы пытаетесь его использовать. - person Günter Zöchbauer; 08.10.2014
comment
Поскольку у меня есть кнопка редактирования для каждого tr, все кнопки изменятся. Я также думаю, что тег шаблона даже не работает внутри таблицы - person Azael; 08.10.2014
comment
В Polymer есть известная проблема. Я отвечу на это позже, когда буду дома. - person Azael; 08.10.2014
comment
Это будет работать внутри <td>. На <tr> точно не знаю. <tr template if="{{xxx}"> может работать. Если у вас есть модель для каждой из этих ячеек, она будет работать, но ваш вопрос не содержит достаточно информации, чтобы увидеть, как вы хотите ее использовать. - person Günter Zöchbauer; 08.10.2014
comment
Я знаю, но есть обходной путь. polymer-project.org/docs/polymer/databinding-compat.html, но упоминается только template repeat=..., но не template if=..., и я никогда не пробовал. Также polymer-project.org/docs/polymer/databinding-advanced.html - person Günter Zöchbauer; 08.10.2014
comment
Исходная проблема: у меня есть таблица, и в каждой строке есть кнопка редактирования. Если эта кнопка нажата, все теги td должны иметь тег ввода текста, содержащий значения. Таким образом, два шаблона для каждого td — это слишком много. ‹tr template ... › не будет работать, поскольку теги td будут игнорироваться браузером, потому что tds не будет видеть таблицу вокруг шаблона. Пробовал почти все с шаблоном, и это не сработало. Поэтому я расширил TD с помощью Polymer, и это сработало. За исключением изменения нажатия кнопки - person Azael; 08.10.2014
comment
Это описание все еще слишком общее, чтобы можно было дать несколько советов. Мне нужно увидеть HTML-код, как ваши <tr>s и <td>s должны выглядеть в обычном режиме и в режиме редактирования, а также как строятся строки (как можно получить доступ к модели) (если вы предоставите дополнительный код, пожалуйста, отредактируйте вопрос - код в комментариях не читается). - person Günter Zöchbauer; 08.10.2014
comment
Поскольку это вопрос об изменении события onclick на кнопке, а не о tds и шаблонах, я создам новый вопрос по этому поводу. - person Azael; 08.10.2014
comment
stackoverflow.com/ вопросы/26263218/ - person Azael; 08.10.2014