twitter-bootstrap – 使用Knockout填充Bootstrap行和跨度

基本上我正在尝试通过Knockout和 JSON对象填充Bootstrap模板.

Bootstrap脚手架：

<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>
...

这是我们正在使用的Knockout代码：

var viewmodel;

$.get('AppData.json',function (data) {
    jsonData = $.parseJSON(data);
    viewmodel = ko.mapping.fromJS(jsonData);
    var apps = viewmodel.Apps();
    ko.applyBindings(viewmodel);
});

问题是我无法让Knockout注入< / div>< div class =“row-fluid”>在以索引模3为条件运行淘汰赛后需要…我假设因为那些< div>标签悬空/未关闭.

简而言之,我如何让viewmodel.Apps();的对象数组适合上面的Bootstrap脚手架？

解决方法

创建一个计算的observable,它将apps observable / observable数组切成三个元素的数组,然后使用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>