0

我正在尝试row-fluid在我的 observableArray 中的每 4 个对象上使用该类渲染一个新的 div。不幸的是，将 html 片段放入 if 块似乎并没有完成任何事情。

还有另一种方法可以做到这一点吗？

<!-- ko foreach: detailsVm.addresses -->
    <!-- ko if: $index() % 3 === 0 -->
    <div class="row-fluid">
    <!-- /ko -->

    <div class="span4">
        My Content
    </div>

    <!-- ko if: $index() % 3 === 0 -->
    </div>
    <!-- /ko -->
<!-- /ko -->
4

2 回答 2

2

一堆（不是很棒的）方法来解决这个问题：

通常，我建议将您的数组映射到更适合在您的视图中绑定的结构。因此，您可以将其映射到行/单元格结构。然后，您可以轻松地循环遍历行/单元格以生成输出。喜欢：http: //jsfiddle.net/rniemeyer/EdXA2/

有点混乱，但你甚至可以这样做：

<div class="container" data-bind="foreach: items">
    <!-- ko if: $index() % 3 === 0 -->
    <div class="row-fluid">
        <div class="span4" data-bind="text: name"></div>
        <!-- ko with: $parent.items()[$index() + 1] -->
        <div class="span4" data-bind="text: name"></div>
        <!-- /ko -->
        <!-- ko with: $parent.items()[$index() + 2] -->
        <div class="span4" data-bind="text: name"></div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>

喜欢：http: //jsfiddle.net/rniemeyer/pfzpq/

自定义绑定的一个想法是创建一个绑定，该绑定接受一个数组和许多列，并将其拆分为更小的数组。像这样的东西：http: //jsfiddle.net/rniemeyer/sHDnR/。 

ko.bindingHandlers.arrayToRows = {
    init: function(element, valueAccessor, all, vm, context) {
        var rows = ko.computed(function() {
            var options = ko.toJS(valueAccessor()),
                data = options.data,
                count = options.count,
                rows = [], row;

            for (var i = 0, j = data.length; i < j; i++) {
                if (i % count === 0) {
                    if (row) {
                        rows.push(row);
                    }
                    row = [];
                }
                row.push(data[i]);
            }

            //push the final row  
            if (row) {
                rows.push(row);
            }

            return rows;

        }, null, { disposeWhenNodeIsRemoved: element });

        ko.applyBindingsToNode(element, { foreach: rows });

        return { controlsDescendantBindings: true };
    }
};

我还有另一个想法，自定义绑定会在事后包装元素。当我有更多时间时，可能会试一试。

于 2012-07-30T19:02:17.950 回答
1

我知道您已经修复了它，但是对未来的想法：在您的上下文中始终存在该包装器 div 是否有害，但每 4 行仅存在一个“流体”类？因为如果不是这样，即使我讨厌渲染不必要的标记，在这样的迭代情况下，有时我会发现只使用 CSS 更容易。就像是：

.container .row:nth-child(4n) { 你的流畅风格 }

于 2012-07-30T23:52:40.167 回答