我想知道将 HTML 框架（bootstrap、uikit）与 Cycle.js 集成的做法是什么？
我可以看到两种不同的方法：
拥有一个相当庞大的静态 HTML，用于添加页面的所有相关菜单、小工具……，它还会加载循环应用程序。
有一个最小的 HTML 文件，它只加载循环应用程序，然后循环应用程序执行所有操作。
我目前正在使用解决方案 1，但我可以看到它不会随着更复杂的页面进行缩放（因为无论如何这些都会对页面的 HTML 结构进行大量更改）。
但是，在解决方案 2 的情况下，使用循环编程 API 中的模板框架的最佳方式是什么？
【问题讨论】：
标签： cyclejs
我认为我在做的更多是 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>
显示类似
【讨论】：