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集成？

1 个答案: