Làm thế nào để hiển thị tr điều kiện trong knockout.js foreach ràng buộc

Question

Tôi muốn hiển thị động hàng và cột bằng cách loại trực tiếp. Ý tưởng là tôi muốn điền vào mỗi hàng với một số ô và tự động thêm nhiều hàng hơn nếu cần. phép giả định rằng số totall của các tế bào bằng số 4 * hàng, sau đó tôi đã cố gắng:

<table> 
    <tbody data-bind="foreach: model"> 
     <!--ko if: $index() % 4 == 0--><tr><!--/ko--> 
     <td> 
       <label data-bind="text: Value"></label> 
     </td> 
     <td> 
       <input type="checkbox" data-bind="checked: IsChecked"/> 
     </td> 
     <!--ko if: $index() % 4 == 0--></tr><!--/ko--> 
    </tbody> 
</table> 

nhưng nó hoạt động như nó là:

<table> 
    <tbody data-bind="foreach: model"> 
     <!--ko if: $index() % 4 == 0--> 
     <td> 
       <label data-bind="text: Value"></label> 
     </td> 
     <td> 
       <input type="checkbox" data-bind="checked: IsChecked"/> 
     </td> 
     </tr><!--/ko--> 
    </tbody> 
</table> 

bằng cách không render toàn bộ hàng với nội dung, là nó có thể với loại trực tiếp để hiển thị tất cả các ô và thêm hàng chỉ khi cần thiết?

Như một cách giải quyết khác, tôi nghĩ về lồng nhau foreach, nhưng nó sẽ yêu cầu mô hình của tôi để thay đổi từ chiều đơn thành hai chiều mà có vẻ kỳ quặc.

Answer 1

Thêm một tài sản đó cấu trúc dữ liệu của bạn vào hàng tính:

<table> 
    <tbody data-bind="foreach: rows"> 
     <tr> 
      <!-- ko foreach: $data --> 
      <td data-bind="text:$index"></td> 
      <td data-bind="text:fname"></td> 
      <td data-bind="text:lname"></td> 
      <!-- /ko --> 
     </tr> 
    </tbody> 
</table> 

với mã:

var vm = { 

    people: ko.observableArray([ 
     { fname: 'fname', lname: 'lname' }, 
     { fname: 'fname', lname: 'lname' }, 
     { fname: 'fname', lname: 'lname' }, 
     { fname: 'fname', lname: 'lname' } 
    ]) 
}; 

vm.rows = ko.computed(function() { 

    var itemsPerRow = 3, rowIndex = 0, rows = []; 

    var people = vm.people(); 
    for (var index = 0; index < people.length; index++) { 
     if (!rows[rowIndex]) 
      rows[rowIndex] = []; 

     rows[rowIndex].push(people[index]); 

     if (rows[rowIndex].length == itemsPerRow) 
      rowIndex++; 
    } 

    return rows; 
}, vm); 

$(function() { 
    ko.applyBindings(vm); 
}); 

Answer 2

Cú pháp của bạn sẽ không hoạt động với công cụ tạo khuôn mẫu mặc định knockout chỉ vì nó sử dụng DOM. Nếu bạn cần làm điều này, hãy sử dụng công cụ tạo khuôn mẫu bên ngoài dựa trên chuỗi (nó sẽ xử lý mẫu của bạn dưới dạng chuỗi và sẽ sử dụng thao tác regex và chuỗi, vì vậy bạn sẽ có thể thực hiện thủ thuật này với kết xuất có điều kiện của thẻ bắt đầu/kết thúc). dụ bạn sử dụng js gạch:

http://jsfiddle.net/2QKd3/5/

HTML

<h1>Table breaking</h1> 
<ul data-bind="template: { name: 'peopleList' }"></ul> 

<script type="text/html" id="peopleList"> 
    <table> 
    <tbody> 
    {{ _.each(model(), function(m, idx) { }} 
     {{ if (idx % 4 == 0) { }} 
      <tr> 
     {{ } }} 
     <td> 

       <label>{{= m.Value }}</label> 
     </td> 
     <td> 
      <input type="checkbox" data-bind="checked: m.IsChecked"/> 
     </td> 
     {{ if (idx % 4 == 3) { }} 
     </tr> 
     {{ } }} 
    {{ }) }} 
      </tbody> 
      </table> 
</script> 

Javascript (bao gồm nhấn mạnh hội nhập decribed đây - http://knockoutjs.com/documentation/template-binding.html

_.templateSettings = { 
    interpolate: /\{\{\=(.+?)\}\}/g, 
    evaluate: /\{\{(.+?)\}\}/g 
}; 

/* ---- Begin integration of Underscore template engine with Knockout. Could go in a separate file of course. ---- */ 
    ko.underscoreTemplateEngine = function() { } 
    ko.underscoreTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), { 
     renderTemplateSource: function (templateSource, bindingContext, options) { 
      // Precompile and cache the templates for efficiency 
      var precompiled = templateSource['data']('precompiled'); 
      if (!precompiled) { 
       precompiled = _.template("{{ with($data) { }} " + templateSource.text() + " {{ } }}"); 
       templateSource['data']('precompiled', precompiled); 
      } 
      // Run the template and parse its output into an array of DOM elements 
      var renderedMarkup = precompiled(bindingContext).replace(/\s+/g, " "); 
      return ko.utils.parseHtmlFragment(renderedMarkup); 
     }, 
     createJavaScriptEvaluatorBlock: function(script) { 
      return "{{ " + script + " }}"; 
     } 
    }); 
    ko.setTemplateEngine(new ko.underscoreTemplateEngine()); 
/* ---- End integration of Underscore template engine with Knockout ---- */ 

var viewModel = { 
    model: ko.observableArray([ 
     { Value: '1', IsChecked: 1 }, 
     { Value: '2', IsChecked: 0 }, 
     { Value: '3', IsChecked: 1 }, 
     { Value: '4', IsChecked: 0 }, 
     { Value: '5', IsChecked: 1 }, 
    ])   
}; 

ko.applyBindings(viewModel); 

P.S .: nhưng Bett er avoid using tables for html layout. Ví dụ của bạn có thể được hiển thị bằng cách sử dụng các phần tử khối nội tuyến có nhiều mã sạch hơn.