将剔除数据的结果分成两列

Question

我很好奇是否有一种简单的方法可以通过Knockout和HTML将下面的代码分成2列。我知道如何在CSS中这样做，但实际上它只是将结果1-5和6-9分开。这是我的密码。截图也附上去了。谢谢

​

         <div class="item summary">
              <h3> <?=l(479)?> </h3>
                <div data-bind="foreach:$data.summary">
                  <div>
                   <span data-bind="text:$data.sequence + '.'"></span>
                    <span data-bind="text:$data.label + ':'"></span>
                    <span data-bind="text:$data.value"></span>
                  </div>
              </div>
           </div>

Answer 1

如果长度不会改变，您可以复制每个块的标记并添加一个slice()。这不是最优雅的，但可能是最简单的。

<!-- ko if: summary && summary.length > 0 -->
    <div data-bind="foreach: $data.summary.slice(0,5)">
        ...
    <div data-bind="foreach: $data.summary.slice(5)">
        ...
<!-- /ko -->

如果您想要更动态的东西，您可以创建一个计算函数，将数组分割成多个片段，然后使用嵌套的foreach：

​

function viewModel(){
    var self = this;
    this.summary = [
      new Summary(1),
      new Summary(2),
      new Summary(3),
      new Summary(4),
      new Summary(5),
    ];
    
    this.summaryBlocks = ko.computed(function(){
      if(self.summary && self.summary.length > 0){
      var size = self.summary.length / 2;
        return [
          self.summary.slice(0,size), 
          self.summary.slice(size)
        ];
      }else{
        return [];
      }
    });
}

function Summary(val){
    this.sequence = 'sequence';
    this.label = 'label';
    this.value = val;    
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="item summary">
  <h3> <?=l(479)?> </h3>
  <div data-bind="foreach: summaryBlocks">
    <div style="display:inline-block; vertical-align:top;" data-bind="foreach:$data">
      <div>
        <span data-bind="text:$data.sequence + '.'"></span>
        <span data-bind="text:$data.label + ':'"></span>
        <span data-bind="text:$data.value"></span>
      </div>
    </div>
  </div>
</div>

​

编辑：处理可变列数的另一个片段

​

function viewModel() {
  var self = this;

  this.columns = ko.observable(1);
  this.summary = [new Summary(1), new Summary(2), new Summary(3), new Summary(4), new Summary(5), new Summary(6), new Summary(7), new Summary(8), new Summary(9)];

  this.summaryBlocks = ko.pureComputed(function() {
    var result = [];
    for (var i = 0; i < self.columns(); i++) result.push([]);

    if (self.summary && self.summary.length > 0) {
      for (var i = 0; i < self.summary.length; i++) {
        var col = i % self.columns();
        result[col].push(self.summary[i]);
      }
    }
    return result;
  });
}

function Summary(val) {
  this.sequence = 'sequence';
  this.label = 'label';
  this.value = val;
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

columns: <span data-bind="text: columns"></span>
<br/><input type="range" min=1 max=5 data-bind="value: columns" />

<div class="item summary">
  <div data-bind="foreach: summaryBlocks">
    <div style="display:inline-block; vertical-align:top;" data-bind="foreach:$data">
      <div style="border: 1px dashed blue;">
        <span data-bind="text:'item ' + value"></span>
      </div>
    </div>
  </div>
</div>

​