使用淘汰赛填充引导程序行和跨度 [英] Using Knockout to Populate Bootstrap Rows and Spans

问题描述

实际上，我正在尝试通过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>

这篇关于使用淘汰赛填充引导程序行和跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！