2

我遇到了条件渲染的问题。这是我的 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，所以我认为这不是问题......

这是一个实际的错误还是我错过了什么？

4

1 回答 1

2

您在 dom 驱动程序中遇到此错误：https ://github.com/cyclejs/core/issues/228

“问题”是您要切换的两个元素都是按钮。因此，当从虚拟 dom 切换时todo.completed不会!todo.completed创建新按钮，而只会更新旧按钮的类和标签（因为您想要最小的 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')
于 2016-05-09T10:02:22.997 回答