Knockoutjs foreach if inside table

I have a foreach creating a table in one of my pages. My goal is when they checked the checkbox, I would add additional items for this table

My problem is that when the table is first drawn everything works as expected. But if I check the box after drawing the table, the ko if statement does not over-evaluate. What is the best method to achieve this goal? My current code is below.

<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>

      

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

      

+3


source to share


1 answer


The content of ko.observableArray AvailableCerts is not observable by default. If you plan to work with data after it has been loaded, you need to also make data for each monitored certificate. So, something like this in your Ajax call:

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

      



Or check out the mappings plugin .

+2


source







All Articles