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创建对象，然后创建属性。

此类内容的唯一情况是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')，然后点击流。

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

1 个答案: