Knockout js foreach 将大数据逐行绑定到模板中答案

【问题标题】：Knockout js foreach binding large data into row by row templateKnockout js foreach 将大数据逐行绑定到模板中
【发布时间】：2014-02-28 23:01:47
【问题描述】：

我有一个像下面这样使用敲除和引导 css 的数据绑定。我有这个 degreeCodes JSON 有 40 个项目。但在 UI 方面我每个<div class="row" >只需要4个@

第 5 个应该创建一个新的<div class="row" > 并添加内容那里。所以如果它工作正常，它将有 10 个<div class="row" > 每个都有 4 项

<label class="text-muted" data-bind="text: DegreeName"></label>

我怎样才能做这样的模板？当它达到 n mod 4 =0 时，它在哪里添加一个新的 div 类行，其中 n 是来自 jsonview 的当前项目被绑定？如果有帮助，我可以添加父 div

<div class="row" data-bind="foreach: degreeCodes">
                <label class="text-muted" data-bind="text: DegreeName">></label>
<div>

如果它工作正常，它将呈现类似...

   <div class="row" data-bind="foreach: degreeCodes">
                    <label class="text-muted" data-bind="text: DegreeName"> Degree1</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree2</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree3</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree4</label>
    <div>

        <div class="row" data-bind="foreach: degreeCodes">
                    <label class="text-muted" data-bind="text: DegreeName"> Degree5</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree6</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree7</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree8</label>
    <div>

【问题讨论】：

4 on each 是什么意思？能否请您详细说明
@dcodesmith 每个
有 4 个项目被绑定当它的时间绑定到 5 8th 需要添加一个新的
并将那些 5*10 放入其中

标签： c# jquery asp.net-mvc knockout.js twitter-bootstrap-3

【解决方案1】：

我会创建一个computed，它只是从原始数组返回一个由 4 元素子数组组成的数组，然后使用两个嵌套的 foreach 循环；外部的可能是循环计算数组的无容器绑定，内部的绑定与您现在所做的类似，循环遍历每个 4 数组。

类似：

vm.byFour=ko.computed(function() {
  var source=ko.unwrap(vm.degreeCodes);
  var result=[];
  for (var i=0; i<source.length; i+=4) {
    result.push(source.slice(i, i+4);
  }
  return result;
});

...

<!-- ko: foreach: {data: byFour, as: degreeCodes} -->
<div class="row" data-bind="foreach: degreeCodes">
   <label class="text-muted" data-bind="text: DegreeName">></label>
<div>
<!-- /ko -->

【讨论】：

【解决方案2】：

Knockout 的 foreach 绑定不够复杂，无法处理此问题。您需要细分您的数据，以便您基本上拥有一个只有四个项目的数组。然后你可以做一个嵌套的 foreach 来遍历它们。

【讨论】：