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

Question

我有一些旧代码，我想看看是否可以使用 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>";
    }

javascript 生成了一组带有一些嵌套 div 的部分。每 6 个 div 它创建一个新部分。我了解如何使用 knockout.js 进行数据绑定

data-bind="foreach: test, visible: tests().length > 0" 但是如果（i%6 == 0）我该如何做决策

更新

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

上面的问题是我仍然想在 section 中生成 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());

Answer 1

您可以在foreach 上下文中使用$index 对象：

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

阅读更多关于foreach绑定的信息：http://knockoutjs.com/documentation/foreach-binding.html

编辑： 为了避免渲染：

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

Answer 2

我建议您将 2 个 ko.observables 添加到您的 viewModel。第一个是“sections”数组，第二个是 ko.computed，每次更新测试时都会重新填充“sections”，然后使用绑定循环遍历“sections”。

这是一个小提琴示例：

http://jsfiddle.net/Zholen/q57RX/

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

Answer 3

Knockout.js 有一个“if”绑定：http://knockoutjs.com/documentation/if-binding.html