Question

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

我想知道是否有关于HTML设计器如何＆lt; - ＆gt;的资源。 JS Dev流程可以完成。
或者换句话说，如何将HTML资源提取到不同的文件中。

提前致谢

Answer 1

对于每个屏幕，您将拥有＆＃34;查看＆＃34; JavaScript中的函数，其中标记将使用hyperscript-helpers在JavaScript中编写。如果您需要从HTML标记转换为hyperscript-helpers，请使用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，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或类仍然存在 - 我唯一需要做的就是重新绑定。

如何使用Cyclejs与外部模板

2 个答案: