html - 如何将 Cyclejs 与外部模板一起使用

Question

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

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

提前致谢

Answer 1

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

Answer 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，然后是一个设置为“mapme”id的无序列表。id假设她提供了一个文件，其中包含：

列表.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 或类——我唯一需要做的就是重新捆绑。