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

Question

I have the following snippet:

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

This seems to render as just:

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

Note that none of the attributes are being rendered. My cycle.js imports in this file are simply:

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

score 1 · Accepted Answer · answered Jan 21 '17 at 18:52

It's snabbdom.

It should be

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

And events go under on, like

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

You have to create object with key attrs and then attributes.

The only case when something like this will work are modules class and style. class takes CSS class as key and condition as value, e.g.

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

When condition is falsy then class will not be present.

style is just like CSS styles key - value:

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

Also with Cycle you should not attach events directly to DOM by yourself but call source driver DOM to do that, e.g. sources.DOM.select('a').events('click') and then you have clicks stream.

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

1 Answers1