如何将 Cyclejs 与外部模板一起使用答案

【问题标题】：How to use Cyclejs with external template如何将 Cyclejs 与外部模板一起使用
【发布时间】：2016-05-17 06:07:24
【问题描述】：

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

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

提前致谢

【问题讨论】：

【解决方案1】：

对于每个屏幕，您都将拥有 JavaScript 中的“查看”功能，其中标记将使用超脚本助手以 JavaScript 编写。如果您需要从 HTML 标记转换为超脚本助手，请使用 http://html-to-hyperscript.paqmind.com/。

【讨论】：

感谢您的重播 :D！有没有例子说明如何做到这一点？我看不清楚如何从视图中提取“VDOM”创建。例如在这个simple code 中，代码依赖于流图。
在看到这些videos 之后，我对你的回答有了更好的理解。顺便说一句，我建议你看看它们，它们真的很酷

【解决方案2】：

我也有类似的情况，我编写业务逻辑，我女儿编写 HTML 和 CSS。因此，受hyperstream 的启发，并且由于CycleJS 使用Snabbdom 虚拟DOM 库，我写了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和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 设置为“消息”，然后是一个无序列表，其中id 设置为“mapme”。假设她提供了一个文件，其中包含：

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$
  }
}

...

当我使用 browserify 捆绑 main.js 时，我添加了 brfs 转换以将模板硬编码到捆绑包中：

  browserify -t brfs main.js > bundle.js

现在她可以对 list.html 进行更新——只要保留用于定位数据的核心 HTML 和 ID 或类——我唯一需要做的就是重新捆绑。

【讨论】：