如果在桌子内面，Knockoutjs会使用

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>

和我的viewModel

 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([]);
          }
      }
  });
};

或者签出映射插件。