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

問題がある場合、他の代わりに二つの別々の条件：

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

トグルしているようですボタンを押して "unmark"にしてから、もう一度 "mark"に戻ってください（コンソールログで確認済みです）。私の意図は、これら二つのクラス.markと.unmarkにマッピングされているので、私はそれが問題だとは思わない...

は、実際のエラーというか、私が何かをしないのですか？あなたは、DOMドライバーでこのバグに遭遇している

Answer 1

：https://github.com/cyclejs/core/issues/228

「問題は」あなたがトグルされている要素の両方がボタンであるということです。したがって、todo.completedから!todo.completed virtual-domに切り替えると、新しいボタンは作成されませんが、DOMの変更を最小限に抑えるため、古いボタンのクラスとラベルを更新するだけです。

これは、clickイベントがまだ処理されている間に同期的に発生します。クラス名が更新されると、イベントは次のリスナーによって処理されます。次のリスナーは（新しい）クラス名と一致し、イベントも受け入れます。この2番目のリスナーは、タスクを再度マーク解除するリスナーです。

すぐに解決できるのは、両方のボタンにkeyという属性を付けることです。これにより、仮想ドミノがボタンを再作成します。しかし、私が言ったように、それは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')