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: </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?
The problem is that your checked binding is binding against a bool, not an observable.
Change this:
to this: