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

Question

好吧，基本上我正在尝试通过 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 注入(inject) </div><div class="row-fluid">在运行索引模 3 的 knockout 条件后需要...我假设因为那些 <div>标签悬空/未关闭。

简而言之，我如何获得 viewModel.Apps();的对象数组以适应上述 Bootstrap 脚手架？

Answer 1

制作一个计算出的 observable 切片 apps observable/observable 数组转换成三个元素的数组，然后用 foreach 绑定(bind)一些根元素到它捆绑。像这样的东西。

可观察的:

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>