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＆gt; 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>

上面的问题是我仍然想在该部分内生成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

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

<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

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

Answer 3

我建议你在viewModel中添加2个ko.observable。第一个是'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>

我可以用knockout.js做分支/决定吗？

3 个答案: