使用 Knockout 填充 Bootstrap Rows 和 Span [英] Using Knockout to Populate Bootstrap Rows and Spans

查看：16
本文介绍了使用 Knockout 填充 Bootstrap Rows 和 Span的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

自举脚手架:

<div class="span4"><h1>应用标题</h1><p>应用说明</p>
<div class="span4"><h1>应用标题</h1><p>应用说明</p>

<div class="span4"><h1>应用标题</h1><p>应用说明</p>

<div class="row-fluid"><div class="span4"><h1>应用标题</h1><p>应用说明</p>

<div class="span4"><h1>应用标题</h1><p>应用说明</p>

<div class="span4"><h1>应用标题</h1><p>应用说明</p>

...

这是我们使用的淘汰赛代码:

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

问题是，在运行索引模 3 的淘汰赛条件后，我无法让 Knockout 注入 </div><div class="row-fluid">.. 我假设是因为那些

标签悬空/未关闭.

简而言之，如何让 viewModel.Apps(); 的对象数组适合上述 Bootstrap 脚手架?

解决方案

制作一个计算 observable 将 apps observable/observable 数组切片为三个元素的数组，然后将一些根元素绑定到它foreach 绑定.像这样的东西.

可观察:

viewModel.appRows = ko.computed(function() {var apps = this.Apps();var 结果 = [];for (var i = 0; i < apps.length; i += 3) {var 行 = [];for (var j = 0; j <3; ++j) {如果(应用程序 [i + j]){row.push(apps[i + j]);}}结果.推(行)；}返回结果；}, 视图模型);

标记:

<div class="row-fluid" data-bind="foreach: $data"><div class="span4"><h1 data-bind="text: title"></h1><p data-bind="text: description"></p>

Well essentially I'm trying to populate a Bootstrap template via Knockout and a JSON object.

Bootstrap scaffolding:

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

Here is the Knockout code we're using:

var viewModel;

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

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.

In short, how do I get viewModel.Apps();'s array of objects to fit within the above Bootstrap scaffolding?

解决方案

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.

Observable:

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);

Markup:

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

这篇关于使用 Knockout 填充 Bootstrap Rows 和 Span的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆