如何在Cycle.js/dom中啓用屬性的渲染？

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對象，然後屬性。

當這種情況發生的唯一情況是modulesclass和style。 class將CSS類作爲關鍵字並將其作爲值，例如

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

當條件是falsy，那麼class不會出現。

style就像CSS樣式鍵 - 值：

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

用循環，你不應該自己直接連接事件，DOM，但調用源驅動器的DOM要做到這一點，例如

也sources.DOM.select('a').events('click')然後你點擊流。