Question

我想使用form-group从淘汰赛中将form-horizontal循环到foreach内。我有条件，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

您似乎对ko- / ko标签对有些混乱

如果条件<fieldset>有效，则将打开表格Id() === 1，如果Id() === 2将关闭

Answer 2

首先，您的无容器控制流语法无效。您应该像对待<div>标签一样，将它们视为真正的html容器元素。

来自documentation：

和注释用作开始/结束标记，定义了一个内部包含标记的“虚拟元素”。淘汰赛可以理解这种虚拟元素的语法，并且可以像实际的容器元素一样进行绑定。

即使您修复了语法，它也不会显示您想要的输出。一次forArray循环无法创建此功能，因为它将为fieldset 1和2创建多个Id元素。因此，您需要创建一个{{3 }}属性。此计算出的属性将具有2个数组属性：

lessThanTwo：推送Id的1和2的项目
moreThanTwo：推送Id大于2的项目

每次原始forArray更改时，groupedArray都会重新计算一次。您可以通过将Id的{{1}}输入更改为5来进行测试。该项将被移到Ronaldo之外。

使用computed绑定在fieldset div中创建新的with

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());

如何根据多个if条件在foreach中对项目进行分组

2 个答案: