knockout binding partially work

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

});

I use mapping for generating the view model, so I can't really show any code, but IsSelected is a bool property on the mvc model, so it is mapped to a function in the view model. That part works but I don't see why it is not applied from the start. — Sam
You could show the data that you map to the view model, that would be a start. — Paul Manzotti

Paul Manzotti Paul Manzotti · Accepted Answer · 2013-03-11T16:48:03

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?

knockout binding partially work

1 Answers