Knockout：从可观察数组创建一个有组织的按钮表

Question

我正在尝试为给定数量的按钮创建一个包含四列按钮的表（或列表）。一旦一行有四个按钮，它就会移动到下一行。我在使用knockout observable数组来表示我的数据时遇到了麻烦。我下面的代码为每个按钮生成一行，但我希望在移动到下一行之前有一行有四个按钮。考虑到我的数据组织方式，有没有办法做到这一点？

HTML：

<table>
     <tbody data-bind="foreach: chosenModelData" id="timesteps">
          <tr>
             <td><button class="btn btn-default" data-bind="attr: {disabled: $data[2]}, 
                text: $data[0], click: $parent.load_image"></button></td>
          </tr>
     </tbody>
</table>

摘自我的JS档案：

for(var i = 0; i < json.images[0].length; i++) {
    self.chosenModelData.push([timestep[i], imgpath[i], false]);
}

编辑（使用虚拟元素）：

<table id="mytable">
       <tbody data-bind="foreach: chosenModelData" id="timesteps">
             <!-- ko if: $index() % 4 === 0 || $index() === 0-->
                      <tr>
             <!-- /ko -->
                          <td><button class="btn btn-default" data-bind="attr: {disabled: $data[2]}, text: $data[0], click: $parent.load_image"></button></td>
             <!-- ko if: $index() % 4 === 0 || $index() === 0 -->
                      </tr>
             <!-- /ko -->
        </tbody>
</table>

在：

之后（使用虚拟元素）：

开发工具html：

<table id="mytable">
                    <tbody data-bind="foreach: chosenModelData" id="timesteps">
                        <!-- ko if: $index() % 4 === 0 || $index() === 0 -->
                            <tr>
                        <!-- /ko -->
                                <td><button class="btn btn-default" data-bind="attr: {disabled: $data[2]}, text: $data[0], click: $parent.load_image"></button></td>
                        <!-- ko if: $index() % 4 === 0 || $index() === 0 -->
                            </tr>
                        <!-- /ko -->

                        <!-- ko if: $index() % 4 === 0 || $index() === 0 --><!-- /ko -->

                        <!-- ko if: $index() % 4 === 0 || $index() === 0 --><!-- /ko -->

                        <!-- ko if: $index() % 4 === 0 || $index() === 0 --><!-- /ko -->

                        <!-- ko if: $index() % 4 === 0 || $index() === 0 -->
                            <tr>
                        <!-- /ko -->
                                <td><button class="btn btn-default" data-bind="attr: {disabled: $data[2]}, text: $data[0], click: $parent.load_image"></button></td>
                        <!-- ko if: $index() % 4 === 0 || $index() === 0 -->
                            </tr>

Answer 1

我认为最简单的方法是将原始数组划分为块。这应该有所帮助：

function ViewModel() {
    var self = this;
    self.chosenModelData = ko.observableArray();

    self.dividedChosenModelData = ko.computed(function () {
        var size = 4;
        var items = self.chosenModelData();
        return [].concat.apply([],
          ko.utils.arrayMap(items, function(elem,i) {
            return i%size ? [] : [items.slice(i,i+size)];
          })
        );
    }, self);

    self.chosenModelData.push('1');
    self.chosenModelData.push('2');
    self.chosenModelData.push('3');
    self.chosenModelData.push('4');
    self.chosenModelData.push('5');
    self.chosenModelData.push('6');
    self.chosenModelData.push('7');
    self.chosenModelData.push('8');
    self.chosenModelData.push('9');


};

ko.applyBindings(new ViewModel());

HTML：

<table>
     <tbody id="timesteps">
         <!-- ko foreach: dividedChosenModelData -->
           <tr>
              <!-- ko foreach: $data -->
                <td><button class="btn btn-default" data-bind="text: $data"></button></td>
              <!-- /ko -->
            </tr>
         <!-- /ko -->
     </tbody>
</table>

http://jsfiddle.net/fpd94zL9/3/

Answer 2

你有没有试过这样的事情？

<table>
     <tbody data-bind="foreach: chosenModelData" id="timesteps">
        <!-- ko if: $index % 4 === 0 -->
           <tr>
        <!-- /ko -->
             <td><button class="btn btn-default" data-bind="attr: {disabled: $data[2]}, 
                text: $data[0], click: $parent.load_image"></button></td>
        <!-- ko if: $index % 4 === 0 -->
           </tr>
        <!-- /ko -->
     </tbody>
</table>