如何将 HTML 框架与 Cycle.js 集成？

Question

我想知道将 HTML 框架（bootstrap、uikit）与 Cycle.js 集成的做法是什么？

我可以看到两种不同的方法：

有一个相当庞大的静态 HTML 添加所有相关的菜单，小工具，...你的页面，这也加载循环应用程序。
有一个最小的 HTML 文件，它只加载循环应用程序，循环应用程序然后执行所有操作。

我目前正在使用解决方案 1，但我可以看到它无法扩展到更复杂的页面（因为这些页面无论如何都会对页面的 HTML 结构进行大量更改）。

但是，对于解决方案 2，使用循环程序化模板框架的最佳方法是什么 API？

Answer 1

我认为我正在做的更多是您问题中 1. 和 2. 的组合。所有标记都在 HTML 文件中，但它不是静态的。 snabbdom-template 模块使用该模型动态填充自定义数据，然后返回到 CycleJS 以呈现到 DOM.

main.js

const xs = require('xstream').default
const run = require('@cycle/run').run
const makeDOMDriver = require('@cycle/dom').makeDOMDriver
const st = require('snabbdom-template')

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

function main(sources) {
  return {
    DOM: xs.of(['one','two','three','four'])                    // mock data
      .map(list =>
        st(template, {                                          // call snabbdom-template
          'div#message': {class: 'myclass', '_html': 'Ready.'}, // link selectors and data
          '#mapme': {_map: {'li': list}}
        })
      )
  }
}

run(main, {
  DOM: makeDOMDriver('#main-container')
})

鉴于index.html

<html>
  <body>
    <div id="main-container"></div>
    <script src="bundle.js"></script>
  </body>
</html>

...和template.html

<div id="message">message goes here</div>
<ul id="mapme">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

...产生类似的东西

<html>
  <body>
    <div id="main-container">
      <div id="message" class="myclass">Ready.</div>
      <ul id="mapme">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
      </ul>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

为了运行这个例子创建main.js、index.html和template.html 个文件，然后在你的终端...

npm i xstream @cycle/run @cycle/dom snabbdom-template brfs
browserify -t brfs main.js > bundle.js
open index.html

.

这是一个 UIkit 示例：

function main(sources) {
  return {
    DOM: xs.of([ 
      ['one',   'testing 1'],
      ['two',   'testing 2'],
      ['three', 'testing 3'],
      ['four',  'testing 4']
    ])
      .map(function (list) {
        return st(template, {
          '#mapme': {_map: {'li': list.map(function (item, ii) {
            const ret = {'h3.uk-accordion-title': item[0], 'div.uk-accordion-content p': item[1]}
            if ( 0 === ii ) { ret['li'] = {class: 'uk-open'} }
            return ret
          })}}
        })
      })
  }
}

鉴于template.html

<ul uk-accordion id="mapme">
    <li>
        <h3 class="uk-accordion-title">Item 1</h3>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 2</h3>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 3</h3>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

...产生类似的东西

<html>
  <body>
    <div id="main-container">
      <ul uk-accordion id="mapme">
        <li class="uk-open">
          <h3 class="uk-accordion-title">one</h3>
          <div class="uk-accordion-content">
            <p>testing 1</p>
          </div>
        </li>
        <li>
          <h3 class="uk-accordion-title">two</h3>
          <div class="uk-accordion-content">
            <p>testing 2</p>
          </div>
        </li>
        <li>
          <h3 class="uk-accordion-title">three</h3>
          <div class="uk-accordion-content">
            <p>testing 3</p>
          </div>
        </li>
        <li>
          <h3 class="uk-accordion-title">four</h3>
          <div class="uk-accordion-content">
            <p>testing 4</p>
          </div>
        </li>
      </ul>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

哪个显示像

Try an online example here.

如何将 HTML 框架与 Cycle.js 集成？

How to integrate HTML frameworks with Cycle.js?

cyclejs