0

私は、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"しかし、どうすれば意思決定を行うことができますかif（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を生成したいということです。テストは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());
4

3 に答える 3

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>
于 2012-10-17T15:15:10.977 に答える
0

viewModelに2つのko.observablesを追加することをお勧めします。1つ目は「sections」配列で、2つ目は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>​
于 2012-10-17T16:51:42.560 に答える
0

Knockout.js には「if」バインディングがあります: http://knockoutjs.com/documentation/if-binding.html

于 2012-10-17T15:22:08.240 に答える