问题描述
实际上,我正在尝试通过Knockout和JSON对象填充Bootstrap模板.
Well essentially I'm trying to populate a Bootstrap template via Knockout and a JSON object.
<div class="row-fluid">
<div class="span4">
<h1>App Title</h1>
<p>App Description</p>
</div>
<div class="span4">
<h1>App Title</h1>
<p>App Description</p>
</div>
<div class="span4">
<h1>App Title</h1>
<p>App Description</p>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h1>App Title</h1>
<p>App Description</p>
</div>
<div class="span4">
<h1>App Title</h1>
<p>App Description</p>
</div>
<div class="span4">
<h1>App Title</h1>
<p>App Description</p>
</div>
</div>
...
这是我们使用的淘汰赛代码:
var viewModel;
$.get('AppData.json', function (data) {
jsonData = $.parseJSON(data);
viewModel = ko.mapping.fromJS(jsonData);
var apps = viewModel.Apps();
ko.applyBindings(viewModel);
});
问题在于,运行索引模3的剔除条件后,我无法让剔除注入所需的</div><div class="row-fluid">
.我假设是因为那些<div>
标记悬空/未关闭.
The problem is that I cannot get Knockout to inject the </div><div class="row-fluid">
required after running a knockout conditional of index modulo 3... I'm assuming because those <div>
tags are dangling / not closed.
简而言之,如何获得viewModel.Apps();
的对象数组以适合上述Bootstrap脚手架?
In short, how do I get viewModel.Apps();
's array of objects to fit within the above Bootstrap scaffolding?
推荐答案
使计算得到的可观察对象将apps
可观察/可观察数组切成三个元素的数组,然后通过foreach
绑定将一些根元素与其绑定.像这样的东西.
Make a computed observable which slices apps
observable/observable array into arrays of three elements, and then bind some root element to it with foreach
binding. Something like this.
可观察:
viewModel.appRows = ko.computed(function() {
var apps = this.Apps();
var result = [];
for (var i = 0; i < apps.length; i += 3) {
var row = [];
for (var j = 0; j < 3; ++j) {
if (apps[i + j]) {
row.push(apps[i + j]);
}
}
result.push(row);
}
return result;
}, viewModel);
标记:
<div class="container" data-bind="foreach: appRows">
<div class="row-fluid" data-bind="foreach: $data">
<div class="span4">
<h1 data-bind="text: title"></h1>
<p data-bind="text: description"></p>
</div>
</div>
</div>
这篇关于使用淘汰赛填充引导程序行和跨度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!