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

【问题标题】：How do you enable rendering of attributes in Cycle.js/dom?如何在 Cycle.js/dom 中启用属性渲染？
【发布时间】：2017-06-06 11:11:07
【问题描述】：

我有以下sn-p：

      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";

【问题讨论】：

标签： dom cyclejs

【解决方案1】：

我是snabbdom。

应该是

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

事件在on 下进行，例如

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

您必须使用键 attrs 和属性创建对象。

只有modules 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') 然后你就有了点击流。

【讨论】：