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')