Wie aktivieren Sie das Rendern von Attributen in Cycle.js/dom?

Question

Ich habe folgende Code-Schnipsel:

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

Dies scheint, als nur zu machen:

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

Beachten Sie, dass keines der Attribute gerendert werden. Meine cycle.js Importe in dieser Datei sind einfach:

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

Answer 1

Es ist snabbdom.

Es sollte

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

Und Veranstaltungen unter on gehen sein, wie

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

Sie haben Objekt mit Schlüssel attrs erstellen und dann Attribute.

Der einzige Fall, wenn so etwas funktioniert, sind modulesclass und style. class nimmt CSS-Klasse als Schlüssel und Bedingung als Wert, z.

Wenn die Bedingung falsch ist, dann ist die Klasse nicht vorhanden.

style ist wie CSS-Stile Schlüssel - Wert:

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

mit Zyklus Auch sollten Sie nicht Ereignisse direkt an DOM selbst anbringen, aber Source-Treiber DOM nennen, das zu tun, zum Beispiel sources.DOM.select('a').events('click') und dann haben Sie Klicks Stream.