CODEWITHSUNDEEP
domcyclejs
bbarker
bbarker

Reputation: 13098

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

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

Upvotes: 0

Views: 202

Answers (1)

David Skuza
David Skuza

Reputation: 140

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.

Upvotes: 1

Related Questions