如何在 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>

请注意 none 的属性正在呈现。我在这个文件中的 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 创建对象，然后使用属性。

只有 modules class 和 style 这样的方法才有效。 class 以 CSS class 作为键，条件作为值，例如

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

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

style 就像 CSS 样式键 - 值：

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

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

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

How do you enable rendering of attributes in Cycle.js/dom?

dom

cyclejs