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

发布时间：2020-12-18 00:25:01 所属栏目：安全来源：网络整理

导读：基本上我正在尝试通过Knockout和 JSON对象填充Bootstrap模板. Bootstrap脚手架： div class="row-fluid" div class="span4" h1App Title/h1 pApp Description/p /div div class="span4" h1App Title/h1 pApp Description/p /div div class="span4" h1App Tit

基本上我正在尝试通过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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!