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