gpt4 book ai didi

javascript - KnockoutJS - 打印 html 片段

转载 作者:行者123 更新时间:2023-11-28 20:57:54 24 4
gpt4 key购买 nike

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

还有其他方法可以实现这一点吗?

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

最佳答案

一堆(不是很棒的)方法来搭配这个:

通常,我建议将您的数组映射到更适合在您的 View 中绑定(bind)的结构。因此,您可以将其映射到行/单元格结构。然后,您可以轻松地循环遍历行/单元格以生成输出。喜欢: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/

自定义绑定(bind)的一个想法是创建一个绑定(bind),该绑定(bind)接受一个数组和多个列,并将其拆分为更小的数组。像这样的: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 };
}
};

我还有另一种想法,自定义绑定(bind)会在事后包装元素。当我有更多时间时可能会尝试一下。

关于javascript - KnockoutJS - 打印 html 片段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11727376/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com