CycleDOM有條件呈現問題

Question

我遇到了有條件呈現的問題。 這裏是我的100％工作的看法：

function todoItem(todo) { 
    return li('.list-item',[ 
    todo.editing ? input('.todo-edit', {type: 'text', value: todo.text, autofocus: true, attributes: { 'data-id': todo.id }}) : '', 
    !todo.editing ? span(`.todo ${todo.completed ? '.completed' : ''}`, { attributes: { 'data-id': todo.id }}, todo.text) : '', 
    button('.remove-todo', {type: 'button', value: todo.id}, 'remove'), 
    todo.completed ? button('.unmark-todo', {type: 'button', value: todo.id}, 'unmark') : '', 
    !todo.completed ? button('.mark-todo', {type: 'button', value: todo.id}, 'mark as done') : '' 
    ]); 

const view = (state$) => { 
    return state$.map(todos => 
    div([ 
     input('.todo-input', {type: 'text', placeholder: 'Todo', value: ''}), 
     ul(todos.items.map(todo => todoItem(todo))), 
     footer(todos) 
    ]) 
); 
}; 

問題是，當我試圖改變條件按鈕的的if-else語句，而不是兩個獨立的條件：

todo.completed ? 
    button('.unmark-todo', {type: 'button', value: todo.id}, 'unmark') : 
    button('.mark-todo', {type: 'button', value: todo.id}, 'mark as done') 

看來，按下該鍵則按鈕「取消標記」，然後再次回到「標記」（我已經證實，與控制檯日誌）。我的意圖被映射到這兩個類.mark和.unmark，所以我不認爲這是一個問題......

那是一個實際的錯誤還是我失去了一些東西？

Answer 1

您在DOM司機遇到這樣的錯誤：https://github.com/cyclejs/core/issues/228

「問題」是，無論你是切換的元素按鈕。因此，從todo.completed切換到!todo.completed時，virtual-dom不會創建新按鈕，而只是更新舊按鈕的類和標籤（因爲您希望最小的dom更改）。

當點擊事件仍在處理中時，這會發生同步。更新類名後，該事件將由下一個偵聽器處理，該偵聽器現在也與（新）類名匹配並接受事件。這第二位聽衆是會再次取消任務的人。

你的快速修復是給這兩個按鈕一個key屬性強制virtual-dom重新創建按鈕。但正如我所說，這是dom驅動程序中的一個錯誤。

todo.completed ? 
    button('.unmark-todo', {key: 'unmark', type: 'button', value: todo.id}, 'unmark') : 
    button('.mark-todo', {key: 'mark', type: 'button', value: todo.id}, 'mark as done')