javascript - Knockoutjs foreach with if inside table

Question

我有一个 foreach 在我的一个页面中创建一个表。我的目标是当他们选中复选框时，我会显示该表的其他元素

我的问题是当第一次绘制表格时，一切都按预期工作。但是，如果我在绘制表格后选中一个复选框，则 ko if 语句不会重新评估。实现此目标的最佳方法是什么？我当前的代码如下。

<tbody data-bind="foreach: AvailableCerts">
    <tr>
        <td>
            <label class="label-checkbox inline">
                <input type="checkbox" data-bind="value: Id, checked: IsSelected">
                <span class="custom-checkbox"></span>
                <span data-bind="text:Name"></span>
            </label>

        </td>
        <td data-bind="text:CertifyingBody"></td>
        <td>
            <!-- ko if: (IsSelected) -->
            <input data-bind="value : EntryDate" required type="date" class="form-control input-sm">
            <!-- /ko -->
        </td>
        <td>
            <!-- ko if: ExitDateRequired -->
            <input data-bind="value : ExitDate" required type="date" class="form-control input-sm">
            <!-- /ko -->
        </td>
        <td>
            <!-- ko if: CaseNumberRequired -->
            <input data-bind="value : CaseNumber" required type="text" class="form-control input-sm">
            <!-- /ko -->
        </td>
    </tr>
</tbody>

还有我的 View 模型

 function AppViewModel() {
    var self = this;

    self.rootUrl = window.location.protocol + "//" + window.location.host + "/Certs/";
    self.AvailableCerts = ko.observableArray([]);

    self.getAvailableCerts = function () {
        $.ajax({
            url: self.rootUrl + "AvailableCerts",
            type: "GET",
            cache: false,
            dataType: "json",
            success: function (results) {
                if (results != null) {
                    self.AvailableCerts(results);
                } else {
                    self.AvailableCerts([]);
                }
            }
        });
    };

    self.getAvailableCerts();
}

ko.applyBindings(new AppViewModel());

Answer 1

ko.observableArray AvailableCerts 的内容默认是不可观察的。如果您计划在下载数据后使用它，您还需要使每个证书的数据都可观察。所以，在您的 Ajax 调用中是这样的:

self.getAvailableCerts = function () {
  $.ajax({
      url: self.rootUrl + "AvailableCerts",
      type: "GET",
      cache: false,
      dataType: "json",
      success: function (results) {
          if (results != null) {
              for (var i = 0; i < results.length; i++) {
                self.AvailableCerts().push({
                    'IsSelected': ko.observable(results[i].IsSelected),
                    'ExitDateRequired': ko.observable(results[i].ExitDateRequired),
                    'CaseNumberRequired': ko.observable(results[i].CaseNumberRequired)
                });
              }
          } else {
              self.AvailableCerts([]);
          }
      }
  });
};

或者查看 mappings插件。