0

我有以下代码：

问题是，当我检查“Visa”时，绑定似乎不起作用（调试时我仍然可以看到 visa.isVisible 的旧值）

...有任何想法吗？

  //my viewModel
  $(function () {
    my = {};

    my.customer = function (customer) {
      var self = this;
      self.customerId = customer.CustomerId;
      self.nationality = {
        nationalityCode: ko.observable(customer.Nationality.NationalityCode),
        isVisible: ko.observable(customer.Nationality.IsVisible)
      };

      self.passport = {
        number: customer.Passport.Number,
        expiredDate: customer.Passport.ExpiredDate,
        isVisible: ko.observable(customer.Passport.IsVisible)
      };

      self.visa = {
        dateIssued: customer.Visa.DateIssued,
        isVisible: ko.observable(customer.Visa.IsVisible)
      };
    };

    my.vm = function () {
      var countries = ko.observableArray([]);
      var states = ko.observableArray([]);
      var customers = ko.observableArray([]);
      var loadData = function () {
        $.getJSON("Home/Index", function (data) {
          loadCustomers(data.Customers);
          loadCountries(data.Countries);
        });
      };
      var loadCustomers = function (customerJson) {
        $.each(customerJson, function (index, customer) {
           customers.push(new my.customer(customer));
        });
      };
      var loadCountries = function (countriesJson) {
        $.each(countriesJson, function (index, country) {
          countries.push({ Id: country.Id, Name: country.Name });
        });
      };

      return {
        loadCustomers: loadCustomers,
        countries: countries,
        states: states,
        customers: customers,
        init: loadData
      }
    }();

    my.vm.init();
    ko.applyBindings(my.vm);
  });
  </script>
</head>
<body>
  <div data-bind="foreach: customers">
     <div style="float: left;">CustomerId: &nbsp;</div>
     <div data-bind="text: customerId"></div>
     <div style="float: left;">Nationality: </div>
     <select data-bind="options: $root.countries, value: nationality.nationalityCode(), optionsText: 'Name', optionsValue: 'Id'"></select>
     <div data-bind="if: passport.isVisible()">
       <div style="float: left;">Passport Exp. date:</div>
       <div data-bind="text: passport.expiredDate"></div>
       <div style="float: left;">Passport number:</div>
       <div data-bind="text: passport.number"></div>
     </div>
     <div data-bind="if: visa.isVisible()">
       <div style="float: left;">Visa date of issue:</div>
       <div data-bind="text: visa.dateIssued"></div>
     </div>
     <div style="clear: both;"></div>
     <input type="checkbox" data-bind="checked: visa.isVisible()" /> Visa <span data-bind="text: visa.isVisible()==true ? 'is':'is not'"></span> visible?
     <hr />
   </div>
 </body>

有什么帮助吗？

4

1 回答 1

1

问题是您的检查绑定绑定的是布尔值，而不是可观察的。

改变这个：

data-bind="checked: visa.isVisible()"

对此：

data-bind="checked: visa.isVisible"
于 2012-12-14T22:51:47.110 回答