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

它似乎将按钮切换到 "unmark"，然后又切换回 "mark"（我已经通过控制台日志确认了这一点）。我的意图映射到这两个类 .mark 和 .unmark，所以我认为这不是问题...

这是实际错误还是我遗漏了什么？

Answer 1

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

"problem"是你切换的两个元素都是按钮。因此，当从 todo.completed 切换到 !todo.completed 时，virtual-dom 不会创建新按钮，而只会更新 class 和旧按钮的标签（因为你想要最小的 dom 变化）。

这确实在处理点击事件时同步发生。 class 名称更新后，事件将由下一个侦听器处理，该侦听器现在也匹配（新）class 名称并接受该事件。第二个侦听器将再次取消标记任务。

您的快速解决方法是为两个按钮都提供一个 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')

CycleDOM 条件渲染问题

CycleDOM conditional rendering issue

javascript

cyclejs