dom - 如何在 Cycle.js/dom 中启用属性渲染？

Question

我有以下片段：

      button('.textbutton', {
          type: "button",
          onclick: `toggleVisibility('#abs-${submission.submission_id}');`
        },
        'Abstract'
      ),
      a( {href: "https://localhost:8080"}, 'View Article'),
      div(`#abs-${submission.submission_id}`,
        {style: 'display:none'}, submission.abstract
      ),

这似乎呈现为：

<button class="textbutton">Abstract</button>
<a>View Article</a>
<div id="abs-1405603">Text not shown on SO...</div>

请注意，没有呈现任何属性。我在这个文件中的 cycle.js 导入很简单：

import {VNode, div, a, button, h3, img, hr, b, p, span} from "@cycle/dom";

Answer 1

这是snabbdom。

它应该是

a({
  attrs: {
    href: '#'
  }
}, ['link'])

事情发生了on，比如

button('.textbutton', {
  attrs: {
    type: 'button'
  },
  on: {
    click: () => {} // here goes function
  },
}, ['Abstract'])

您必须先创建具有键attrs和属性的对象。

像这样可以工作的唯一情况是模块 class和style. class以 CSS 类为键，条件为值，例如

div({
  class: {
    'block': true,
    'hidden': isVisible === false
  }
}, [/**/])

当条件为假时，类将不存在。

style就像 CSS 样式键值：

div({
  style: {
    'display': 'none'
  }
}, [/**/])

同样使用 Cycle，您不应该自己将事件直接附加到 DOM，而是调用源驱动程序 DOM 来执行此操作，例如sources.DOM.select('a').events('click')，然后您有点击流。