使用 Knockout 填充引导行和跨度

Question

基本上我是在尝试通过 Knockout 和 JSON 对象填充 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 在运行索引模 3 的淘汰条件后注入所需的 </div><div class="row-fluid">...我假设是因为那些 <div> 标记悬空/未关闭。

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

Answer 1

创建一个计算的 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>

Answer 2

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

我使用的是普通函数而不是计算函数，因为默认情况下使用它们实现绑定（请参阅此处的 RP Niemeyer 回答 https://stackoverflow.com/a/6712389/323751）

在我的视图模型中：

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>

希望有人觉得这很有用。

Answer 3

我正在使用 bootstrap3，希望每行有 x 个对象，其中 x 取决于窗口大小，例如 col 类。

例如，我有带有类的元素：

col-lg-2 col-md-2 col-sm-3 col-xs-4

所以

如果 xs 则一行有 3 个项目

如果 lg 那么一行有 6 个项目 ...

我扩展了 rkhayrov 的答案以使其发挥作用

/* determine the current bootstrap environment */
function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

    $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env
        }
    };
}


/* determine How many objs per row */
function determineObjectsPerRow(){
    switch(findBootstrapEnvironment()) {
        case 'xs':
            return 3;
            break;
        case 'sm':
            return 4;
            break;
        case 'md':
            return 6;
            break;
        case 'lg':
            return 6;
            break;
    }
}


        var objsPerRow= determineObjectsPerRow();

        for (var i = 0; i < apps.length; i += objsPerRow) {
            var row = [];
            for (var j = 0; j < objsPerRow; ++j) {
                if (apps[i + j]) {
                    row.push(apps[i + j]);
                }
            }
            result.push(row);
        }

我添加了对宽度和高度的依赖，它们是可观察的 因此，如果调整窗口大小，将重新计算函数

var base = {
    AppModel:function (data) {
        var self = this;
        self.data = ko.observable({
            documents:ko.observableArray([]),
            width:ko.observable($(window).width()),
            height:ko.observable($(window).height())
        });

        /* calculate rows based on bootstrap environment */
        self.appRows = ko.computed(function() {
            self.data().height();
            self.data().width();
            var apps = self.data().documents();
            var result = [];
            var objsPerRow= determineObjectsPerRow();

            for (var i = 0; i < apps.length; i += objsPerRow) {
                var row = [];
                for (var j = 0; j < objsPerRow; ++j) {
                    if (apps[i + j]) {
                        row.push(apps[i + j]);
                    }
                }
                result.push(row);
            }
            return result;
        }, self); 

    },
};

和调整大小处理程序

$(window).resize(function(event) {
    vm.data().height($(window).height());
    vm.data().width($(window).width());
});

它就像 Charme 一样工作，为每个设备宽度很好地生成行

如果有人需要达到同样的效果，我把它留在这里