如何更改飛鏢中按鈕的單擊事件

我遇到了在每行的最後一個<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

如何更改飛鏢中按鈕的單擊事件

回答

相關問題