CODEWITHSUNDEEP
knockout.jsknockout-2.0
Guy Z
Guy Z

Reputation: 693

Checked with knockout doesn't work

I have the following code:

The problem is that when I check "Visa" the binding doesnt seem to work (when debbuging I can still see the old value of visa.isVisible)

...any ideas?

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

Any help?

Upvotes: 0

Views: 256

Answers (1)

Judah Gabriel Himango
Judah Gabriel Himango

Reputation: 60061

The problem is that your checked binding is binding against a bool, not an observable.

Change this:

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

to this:

data-bind="checked: visa.isVisible"

Upvotes: 1

Related Questions