1

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

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

  1. 有一个相当庞大的静态 HTML，它添加了页面的所有相关菜单、小工具……，它还加载了循环应用程序。

  2. 有一个最小的 HTML 文件，它只加载循环应用程序，然后循环应用程序执行所有操作。

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

但是，在解决方案 2 的情况下，使用循环编程 API 中的模板框架的最佳方式是什么？

4

1 回答 1

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>

哪个显示像

UIkit 示例

在此处尝试在线示例。

于 2018-01-02T04:04:18.573 回答