我可以使用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格創建一個新的部分。我知道我如何databind與knockout.js

data-bind =「foreach：test，visible：tests（）。length> 0」但我怎麼做決定如果（我％6 == 0）

UPDATE

<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個元素的列表。我想創造一個新的部分每個第六元素。

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

我建議你加2個ko.observables到您的視圖模型。第一個是'章節'數組，第二個是ko.computed，每次測試更新時'節'被重新填充，然後你用'綁定'循環'節'。

下面是一個例子小提琴：

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 2

可以使用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 3

Knockout.js有一個 「如果」 結合：http://knockoutjs.com/documentation/if-binding.html