如何使用带有外部模板的 Cyclejs

Question

我想开始我的第一个 Cycle.js 项目，我将与朋友一起开发它。他是一名 HTML 设计师（对 HTML 和 CSS 非常了解，并且他创建了 Handlebars 模板）并且我对 JS 略知一二。

我想知道是否有关于如何完成 HTML 设计器 <--> JS 开发流程的任何资源。
或者换句话说，如何将 HTML 资源提取到不同的文件中。

提前致谢

Answer 1

对于每个屏幕，您将在 JavaScript 中具有 "view" 功能，其中标记将使用 hyperscript-helpers 在 JavaScript 中编写。如果您需要将 HTML 标记转换为超脚本助手，请使用 http://html-to-hyperscript.paqmind.com/ .

Answer 2

我有类似的情况，我编写业务逻辑，我女儿编写 HTML 和 CSS。所以，受到 hyperstream, and since CycleJS uses the Snabbdom virtual DOM library, I wrote snabbdom-template 的启发。该模块通过定位标准 HTML 标签名称和其他 CSS 选择器并替换模拟值来插入动态数据。

这是一个简化的工作流示例：首先我编写业务逻辑和核心 HTML:

main.js

...

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => div([
        div('#message', 'Ready.'),
        ul('#mapme', list.map(item => li(item)))
      ])
    )

  return {
    DOM: vdom$
  }
}

...

或者——如果使用 Babel and snabbdom-jsx：

...
const vdom$ = data$
  .map(list =>
    <div>
      <div id="message">Ready.</div>
      <ul id="mapme">
        {list.map(item => <li>{item}</li>)}
      </ul>
    </div>
  )
...

然后我告诉我女儿我需要一条消息 div，其中 id 设置为 "message"，然后是一个 id 设置为 [=] 的无序列表50=]。假设她提供了一个包含以下内容的文件：

list.html

<div>
  <div id="message">Message goes here.</div>
  <ul id="mapme">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

然后我将 main.js 更改为：

...

const snabbdom_template = require('snabbdom-template')
const fs = require('fs')
const template = fs.readFileSync('list.html', 'utf-8')

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => snabbdom_template(template, {
      'div#message': 'Ready.',
      '#mapme': {_map: {'li': list}}
    }))

  return {
    DOM: vdom$
  }
}

...

当我捆绑 main.js 时使用 browserify I add the brfs 转换将模板硬编码到捆绑包中：

  browserify -t brfs main.js > bundle.js

现在她可以更新 list.html——只要用于目标数据的核心 HTML 和 ID 或类保持不变——我唯一需要做的就是重新捆绑。

如何使用带有外部模板的 Cyclejs

How to use Cyclejs with external template

html

handlebars.js

cyclejs