使用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在</div><div class="row-fluid">索引模3的条件下运行淘汰后注入所需的...我假设因为这些<div>标签悬空/未关闭.

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

Answer 1

创建一个计算的observable,它将appsobservable/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>

Answer 2

我必须自己解决一个非常类似的问题:使用可观察的数组渲染bootstrap网格,但使用bootstrap v3和ko v3.0.我将把解决方案留在这里供将来参考.

我使用普通函数而不是计算函数,因为默认情况下使用它们实现绑定(请参阅RP Niemeyer答案/sf/answers/469867261/)

在我的视图模型中:

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>

希望有人觉得这很有用.