我可以使用knockout.js进行分支/决策吗

我有一些旧代码，我想看看是否可以使用knockout.js

    var secs = 960 + Math.floor(data.length / 6) * 1060 + 10;
    $("#metro-scrollbar").css("width", secs.toString() + 'px');
    var group_count = 0;
    section = ""
    for (i = 0; i < data.length; i++) {
        if (i % 6 == 0)
            section += "<section class=\"" + (data.length - i <= 6 ? "last" : "") + "\"><h2 class=\"section-title\">Group " + ++group_count  + "</h2>";

        section += "<a href=\"/TheoryTests/Test/" + data[i].Id + "/" + data[i].Title.replace(/ /g,'-') + "\">";
        section += "<div class=\"metro-tile double" + (i % 3 == 2 ? " last" : "") + "\"><div class=\"a1x2\"></div><div class=\"live-tile metrogreen\">";

        section += "<span class=\"tile-title\">" + data[i].Title + "</span>";
        section += "<div class=\"dark\"><div class=\"TheoryTestTile\"><p>Helo</p></div></div>";

        section += "</div></div></a>";
        if (i % 6 == 5)
          section += "</section>";
    }

var secs=960+数学层（data.length/6）*1060+10；
$（“#metro滚动条”）.css（“宽度”，secs.toString（）+“px”）；
var组计数=0；
section=“”
对于（i=0；i
更新

<div id="metro-grid">
    <div id="metro-scrollbar" data-bind="foreach: tests, visible: tests().length > 0">
        <!-- ko if: $index() % 6 == 0 -->
        <section data-bind ="css: { 'last' : $parent.isLastSection($index)}," >
        <!-- /ko -->
            <div class="metro-tile double " data-bind ="css: { 'last' : $parent.isLastTile($index)}">
            <div class="a1x2"></div><div class="live-tile metrogreen">
                <div ></div>
             </div>
                </div>
        <!-- ko if: $index() % 6 == 0 -->
        </section>
        <!-- /ko -->

    </div>
</div>



上面的问题是，我仍然想在节中生成div。tests是一个包含12个元素的列表。我想在每个第6个元素中创建一个新的节

更新2

function TaskListViewModel() {
    // Data
    var self = this;
    self.tests = ko.observableArray([]);
    this.sections = [];

    self.isLastTile = function (i) {
           return i() % 3 == 2;
    };
    self.isLastSection = function (i) {

        return i() >= Math.floor(self.tests().length / 6);
    };

    this.createSections = ko.computed(function () {
        var tests = self.tests();
        current = [];
        sections.push(current);
        for (var i = 0; i < tests.length; i++) {
            current.push(tests[i]);
            if (((i+1) % 6) == 0) {
                current = [];
                sections.push(current);
            }
        }
    });


    $.getJSON(url, function (allData) {
        var mappedTasks = $.map(allData, function (item) { return new Task(item) });
        self.tests(mappedTasks);
        //var secs1 = self.tests().length / 6 * 960 + 960 + 10;
        var secs = 960 + Math.floor(self.tests().length / 6) * 1060 + 10;
        $("#metro-scrollbar").css("width", secs.toString() + 'px');

    });

}
ko.applyBindings(new TaskListViewModel());

函数TaskListViewModel（）{
//资料
var self=这个；
自我测试=可观察到的平均值（[]）；
本节=[]；
self.isLastTile=函数（i）{
返回i（）%3==2；
};
self.isLastSection=函数（i）{
返回i（）>=Math.floor（self.tests（）.length/6）；
};
this.createSections=ko.computed（函数（）{
var tests=self.tests（）；
电流=[]；
部分。推送（电流）；
对于（变量i=0；i
您可以在
foreach
上下文中使用
$index
对象：

<div data-bind="foreach: items">
    <span data-bind="visible: $index() % 6 == 0"></span>
</div>

Knockout.js有一个“if”绑定：
我建议您在viewModel中添加2个ko.observates。第一个是“sections”数组，第二个是一个ko.computed数组，每次更新测试时，都会重新填充“sections”，然后使用绑定循环“sections”

这里有一个小提琴的例子：


var vm=function（）{
var self=这个；
本试验=可观测的可观测范围（[1,2,3,4,5,6,7,8,9，
10,11,12,13,14,15,16]);
本节=[]；
this.createSections=ko.computed（函数（）{
var tests=self.tests（）；
console.log（tests.length）；
对于（变量i=0；i
并没有真正涵盖OP的问题，即如何根据顺序位置有条件地显示某些内容。我添加了更多信息。我现在的问题是，我的分组中的div没有生成。您可以将viewmodel添加到问题中吗？我的问题是，这些部分不应该只隐藏，它们需要不隐藏生成。我可以计算有多少节并执行两个循环。但是如何执行for n循环，其中n是节的数量。当您回答时，我刚刚完成了该操作。我猜这是唯一的方法。ko.computed（）意味着每次创建节（）时都会创建它是否使用？函数中使用的任何ko.observable都会随时调用ko.computed。请注意，在fiddle中，我实际上没有调用createSections（）在任何地方，这都是因为只要我将值设置为'tests'，KO就为我调用createSections。啊，我没有注意到。我为each:createSections进行了绑定，并且在createSections中有一个返回节。我将使用您的方法，而我已经开始工作了，但请注意，每次调用createSections时，您都会将其添加到列表中。所以如果使用ajax来获取数据，那么从初始化开始就会有一个空的部分。
  <div data-bind="foreach: items">
        <!-- ko if: $index() % 6 == 0-->
            <span data-bind="text: $data"></span>
        <!-- /ko -->
    </div>

var vm = function() {
  var self = this;
  this.tests = ko.observableArray([1,2,3,4,5,6,7,8,9,
                                 10,11,12,13,14,15,16]);
  this.sections = [];

  this.createSections = ko.computed(function(){
    var tests = self.tests();
    console.log(tests.length);
    for(var i = 0; i < tests.length; i++)
    {
        if(i%6 == 0)
            self.sections.push([]);
        self.sections[self.sections.length - 1].push(tests[i]);
    }
  });
};

<div>
    <div data-bind="foreach: sections">
        <section data-bind="foreach: $data">
            <div data-bind="text:$data">
            </div>
        </section>
    </div>
</div>​