javascript - 如何根据多个 if 条件对 foreach 内的项目进行分组

Question

我想循环我的 form-group里面form-horizontal使用 foreach从 knockout 。我有条件 Id是 1 和 2，这应该在 <fieldset> 内分组.当只有 1 个条件正常工作时，我已经尝试过，但是当多个 1 和 2 时它不起作用。

代码示例:

<div class="form-horizontal" data-bind="foreach: forArray()">
<!-- ko if: Id() === 1 -->
<fieldset>
    <legend>
        Foo
    </legend>
    <!-- /ko -->
    <!-- ko if: Id() === 1 || Id() === 2 -->
    <div class="form-group">
        <label class="control-label col-sm-5"><span data-bind="html: NameColumn"></span></label>
        <div class="col-sm-7">
            <input type="text" data-bind="value: Id" />
        </div>
    </div>
    <!-- /ko -->
    <!-- ko if: Id() === 2 -->
</fieldset>
<br />
<!-- /ko -->

<!-- ko if: Id() !== 1 && Id() !== 2 -->
<div class="form-group">
    <label class="control-label col-sm-5"><span data-bind="html: NameColumn"></span></label>
    <div class="col-sm-7">
        <input type="text" data-bind="value: Id" />
    </div>
</div>
<!-- /ko -->

Answer 1

首先，您的无容器控制流语法将不起作用。您应该将它们视为真正的 html 容器元素，就像您使用 <div> 一样。标签。

来自documentation :

The <!-- ko --> and <!-- /ko --> comments act as start/end markers, defining a “virtual element” that contains the markup inside. Knockout understands this virtual element syntax and binds as if you had a real container element.

即使您修正了语法，它也不会显示您想要的输出。单次循环遍历 forArray无法创建此功能，因为它会创建多个 fieldset两者的元素 Id 1 和 2。因此，您需要创建一个 computed 属性(property)。此计算属性将具有 2 个数组属性:

• lessThanTwo : 用 Id 推送项目第 1 和第 2
• moreThanTwo : 用 Id 推送项目大于 2

每次原创forArray变化，groupedArray再次计算。您可以通过更改 Id 来测试它输入 Ronaldo到 5。该项目将移出 fieldset .

使用 with 绑定(bind)以创建一个新的 binding context在 form-horizontal格

const viewModel = function() {
  const self = this;

  self.forArray = ko.observableArray([
  { NameColumn: '<u>Messi</u>', Id: ko.observable(1) },
  { NameColumn: '<b>Ronaldo</b>', Id: ko.observable(2) },
  { NameColumn: '<i>Griezmann</i>', Id: ko.observable(3) },
  { NameColumn: '<u>Mbappé</u>', Id: ko.observable(4) }
  ]);

  self.groupedArray = ko.computed(() => {
    const groupedObject = {
      lessThanTwo: [],
      moreThanTwo: []
    };

    self.forArray().forEach(item => {
      // if Id() > 2 push it a moreThanTwo property
      // otherwise push it to lessThanTwo property
      if (item.Id() == 1 || item.Id() == 2)
        groupedObject.lessThanTwo.push(item);
      else
        groupedObject.moreThanTwo.push(item);
    })

    return groupedObject;
  })
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="form-horizontal" data-bind="with: groupedArray">
  <fieldset>
    <legend>
      Foo
    </legend>
    <!-- ko foreach: lessThanTwo -->
    <div class="form-group">
      <label class="control-label col-sm-5"><span data-bind="html: NameColumn"></span></label>
      <div class="col-sm-7">
        <input type="text" data-bind="value: Id" />
      </div>
    </div>
    <!-- /ko -->

  </fieldset>
  <br />
 <!-- ko foreach: moreThanTwo -->
  <div class="form-group">
    <label class="control-label col-sm-5"><span data-bind="html: NameColumn"></span></label>
    <div class="col-sm-7">
      <input type="text" data-bind="value: Id" />
    </div>
  </div>
 <!-- /ko -->
</div>