那么基本上我试图通过填充一个淘汰赛引导模板和JSON对象。
引导脚手架：
<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);
});
问题是，我不能让淘汰赛注入</div><div class="row-fluid">运行条件指数模3的淘汰赛后，需要......我猜想，因为这些<div>标签晃来晃去/没有关闭。
总之，我怎么viewModel.Apps(); 的对象的阵列，以适应上述引导脚手架内？
使所计算观察到的该切片apps可观察到的/可观察的阵列分成三个元件的阵列，然后一些根元素绑定到它与foreach约束力。 事情是这样的。
观察到：
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>
我不得不解决一个非常类似的问题我自己：渲染引导电网与可观察到的数组，但自举v3和KO V3.0。 我会在这里留下我的解决方案以供将来参考。
我用一个简单的功能，而不是计算得到的一个，因为绑定默认使用它们实现的（看RP尼迈耶回答这里https://stackoverflow.com/a/6712389/323751 ）
在我看来，型号：
this.partitioned = function (observableArray, count) {
var rows, partIdx, i, j, arr;
arr = observableArray();
rows = [];
for (i = 0, partIdx = 0; i < arr.length; i += count, partIdx += 1) {
rows[partIdx] = [];
for (j = 0; j < count; j += 1) {
if (i + j >= arr.length) {
break;
}
rows[partIdx].push(arr[i + j]);
}
}
return rows;
};
模板：
<div data-bind="foreach: partitioned(userProjects, 3)">
<div class="row"
data-bind="template: { name: 'projectCell', foreach: $data }"></div>
</div>
<script id="projectCell" type="text/html">
<div class="col-md-4" data-bind="text: name"></div>
</script>
希望有人发现这很有用。
I'm使用bootstrap3，并希望有每行，其中x是根据窗口大小如在山坳类X的对象。
例如我有类元素：
col-lg-2 col-md-2 col-sm-3 col-xs-4
所以
如果XS则行有3个项目
如果LG的则行有6个项目...
我伸出rkhayrov的答案，把它的工作
/* determine the current bootstrap environment */
function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];
$el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env
}
};
}
/* determine How many objs per row */
function determineObjectsPerRow(){
switch(findBootstrapEnvironment()) {
case 'xs':
return 3;
break;
case 'sm':
return 4;
break;
case 'md':
return 6;
break;
case 'lg':
return 6;
break;
}
}
var objsPerRow= determineObjectsPerRow();
for (var i = 0; i < apps.length; i += objsPerRow) {
var row = [];
for (var j = 0; j < objsPerRow; ++j) {
if (apps[i + j]) {
row.push(apps[i + j]);
}
}
result.push(row);
}
我添加了一个依赖于宽度和高度，这是可观测量因此，如果被调整大小的窗口中的功能将被重新计算
var base = {
AppModel:function (data) {
var self = this;
self.data = ko.observable({
documents:ko.observableArray([]),
width:ko.observable($(window).width()),
height:ko.observable($(window).height())
});
/* calculate rows based on bootstrap environment */
self.appRows = ko.computed(function() {
self.data().height();
self.data().width();
var apps = self.data().documents();
var result = [];
var objsPerRow= determineObjectsPerRow();
for (var i = 0; i < apps.length; i += objsPerRow) {
var row = [];
for (var j = 0; j < objsPerRow; ++j) {
if (apps[i + j]) {
row.push(apps[i + j]);
}
}
result.push(row);
}
return result;
}, self);
},
};
并调整大小处理
$(window).resize(function(event) {
vm.data().height($(window).height());
vm.data().width($(window).width());
});
它只是像一个查，行是每个设备宽度很好地产生
我离开这里，如果有人需要，以达到同样的
