knockout binding partially work - binding

Question

Here's the HTML code of PartialView returned by the server upon AJAX call:
<tbody data-bind="foreach: CoverQuotesViewModel">
<tr>
<td><input type="checkbox" data-bind="checked: IsSelected" /></td>
<td ><input type="text" data-bind="value: Label, enable: IsSelected" /></td>
</tr>
</tbody>
then the binding is applied:
$.ajax("getSelectedQuote", {
data: ko.toJSON({ model: self.selectedQuote, model1: formData }),
}),
type: "post", contentType: "application/json",
success: function (result) {
$("#custom").html(result);
ko.applyBindings(self.selectedQuote, $("#covers")[0]);
}
});
I can see my table being populated with the checkboxes properly checked or not. However for unchecked checkboxes, the corresponding input is not greyed out (disabled). If I manually uncheck a checkbox though, the input gets disabled.
So why the 'enable' property is not bound at the beginning ?
EDIT
The MVC Model class:
public class CoverQuoteViewModel
{
public CoverQuoteViewModel()
{
Childs = new List<CoverQuoteViewModel>();
}
public string ProductName { get; set; }
public string Label { get; set; }
public bool IsVisible { get; set; }
public bool IsMandatory { get; set; }
public bool IsSelected { get; set; }
public bool IsChoice { get; set; }
public bool IsComposite { get; set; }
public decimal YearPrice { get; set; }
public decimal BiannualPrice { get; set; }
public decimal QuarterPrice { get; set; }
public decimal MonthPrice { get; set; }
public List<CoverQuoteViewModel> Childs { get; private set; }
public CoverQuoteViewModel SelectedCoverQuote { get; set; }
}
EDIT
Returned JSON data
var initialData = { "Quotes":
[{ "ProductName": null, "MonthPrice": 0, "QuarterPrice": 0, "BiannualPrice": 0, "YearPrice": 0, "CoverQuotesViewModel":
[{ "ProductName": null, "Label": "Première Assistance 24h/24 (GRATUITE)", "IsVisible": true, "IsMandatory": true, "IsSelected": true, "IsChoice": false, "IsComposite": false, "YearPrice": 0.97, "BiannualPrice": 0.49, "QuarterPrice": 0.25, "MonthPrice": 0.08, "Childs": [], "SelectedCoverQuote": null },
{ "ProductName": null, "Label": "Assistance PLUS 24h/24", "IsVisible": true, "IsMandatory": false, "IsSelected": false, "IsChoice": false, "IsComposite": false, "YearPrice": 36.06, "BiannualPrice": 18.22, "QuarterPrice": 9.20, "MonthPrice": 3.10, "Childs": [], "SelectedCoverQuote": null },
{ "ProductName": null, "Label": "Supplément Vol Audio", "IsVisible": true, "IsMandatory": false, "IsSelected": false, "IsChoice": false, "IsComposite": false, "YearPrice": 33.36, "BiannualPrice": 16.85, "QuarterPrice": 8.51, "MonthPrice": 2.87, "Childs": [], "SelectedCoverQuote": null }
]}]
};
The data is parsed like that:
<script type="text/javascript">
#{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model)); }
var initialData = #jsonData;
</script>
and the complete ViewModel
$(function () {
var mvcModel = ko.mapping.fromJS(initialData);
function QuoteViewModel() {
var self = this;
self.customizeQuote = function (quote) {
self.selectedQuote = quote;
//remove the disable attribute on all form controls before serializing data
$(".step").each(function () {
$(this).find('input, select').removeAttr('disabled');
});
//convert form data to an object
var formData = $('#etape').toObject();
$.ajax("getSelectedQuote", {
data: ko.toJSON({ model: self.selectedQuote, model1: formData }),
type: "post", contentType: "application/json",
success: function (result) {
debugger
$("#custom").html(result);
$("#etape").formwizard("show", "customize");
ko.applyBindings(self.selectedQuote, $("#covers")[0]);
}
});
};
self.addRemove = function (cover) {
alert(cover.Label);
};
}
var myViewModel = new QuoteViewModel();
var g = ko.mapping.fromJS(myViewModel, mvcModel);
ko.applyBindings(g);
});

Answer 1

Without being able to see your data or view model, I'd suggest setting the value to IsSelected, so then you will be able to see what the value is. If that looks correct, then there's some other issue, but I wouldn't be surprised if the values are initially incorrect. This could be due to how you are mapping the data to the view model, though I've no way of knowing.
<td><input type="text" data-bind="value: IsSelected, enable: IsSelected" /></td>
I'm confused as to why you are using the mapping plugin twice in your code here, once on your initial data to produce mvcModel, and once to map, well, it looks like you are mapping myViewModel onto mvcModel. Did you mean to have it that way round, because that looks incorrect?
Have you looked at g in the debugger before you applyBindings, and investigated what it looks like?