Javascript – knockoutjs Throws Unable to parse binding attribute

htmljavascriptknockout-1.2knockout.js

I am trying to use knockoutjs 1.2.l and with following code

$(function() {
  var viewModel = {
    categories: ko.observableArray([  
        {"Selected": false, "Text": "Rooms", "Value": "1"},
        {"Selected": false, "Text": "Automobile", "Value": "2"},
        {"Selected": false, "Text": "Buy & Sell", "Value": "3"},
        {"Selected": false, "Text": "Tutions", "Value": "4"},
        {"Selected": false, "Text": "Immigration", "Value": "5"}
    ]),
    initialData: {
        "Description": null,
        "SubCategoryId": 0,
        "Title": null,
        "UserId": 0,
        "AdTypeId": 0,
        "AddressId": null,
        "SubCategory": null,
        "User": null,
        "AdType": null,
        "Address": null,
        "Id": 0,
        "CreatedOn": "\/Date(1307627158991)\/",
        "CreatedBy": 0,
        "LastUpdatedOn": "\/Date(1307627158991)\/",
        "LastUpdatedBy": 0
    },
    chosenCategory: ko.observable()
  };
  ko.applyBindings(viewModel); // Makes Knockout get to work
});

Follwing is the html

<div id="createAdDiv">

<form action="/Ads/Create" method="post">        <p>
        You've chosen: <b data-bind="text: chosenCategory().Text"></b>(Value: <span data-bind='text: chosenCategory().Value'></span>)
    </p>
    <div data-bind="visible: chosenCategory"> <!-- Appears when you select something -->
You have chosen a country with population 
<span data-bind="text: chosenCategory() ? chosenCategory().Text : 'unknown'"></span>.
</div>
    <fieldset>
        <div class="editor-label">

            <label for="SubCategoryId">Choose a Sub Category</label>
        </div>
        <div class="editor-field">
            <select data-bind="options: categories,optionsCaption:&#39;Choose...&#39;,optionsText: &#39;Text&#39;,value:chosenCategory" data-val="true" data-val-number="The field Choose a Sub Category must be a number." data-val-required="The Choose a Sub Category field is required." id="SubCategoryId" name="SubCategoryId"></select>

            <span class="field-validation-valid" data-valmsg-for="SubCategoryId" data-valmsg-replace="true"></span>
        </div>

    </fieldset>
</form></div>

Throws the exception.

Unable to parse binding attribute. Message: TypeError: chosenCategory() is undefined;
Attribute value: text: chosenCategory().Text

But, if I change javascript to following it works

$(function() {
    var viewModel = {
        categories: ko.observableArray( [{"Selected":false,"Text":"Rooms","Value":"1"},{"Selected":false,"Text":"Automobile","Value":"2"},{"Selected":false,"Text":"Buy & Sell","Value":"3"},{"Selected":false,"Text":"Tutions","Value":"4"},{"Selected":false,"Text":"Immigration","Value":"5"}] )
            ,initialData: {"Description":null,"SubCategoryId":0,"Title":null,"UserId":0,"AdTypeId":0,"AddressId":null,"SubCategory":null,"User":null,"AdType":null,"Address":null,"Id":0,"CreatedOn":"\/Date(1307628565958)\/","CreatedBy":0,"LastUpdatedOn":"\/Date(1307628565958)\/","LastUpdatedBy":0}
    };
    viewModel.chosenCategory = ko.observable(viewModel.categories);
      ko.applyBindings(viewModel); // Makes Knockout get to work

});

I am following an example from knockout.js website only.

Best Answer

You are going to want to check for null in your first paragraph tag like:

<p>
    You've chosen: <b data-bind="text: chosenCategory() ? chosenCategory().Text : 'unknown'"></b>(Value: <span data-bind="text:chosenCategory() ? chosenCategory().Value : 'unknown'"></span>)
</p>

In your second snippet of code, it is working because it is reading Text and Value properties from viewModel.categories, which are just empty. If you want to set a default, then you would want to do something like viewModel.chosenCategory = ko.observable(viewModel.categories()[0]);

Another alternative is to use a template for that section and pass in chosenCategory, as they handle nulls without any extra work. Although, it would just not render that section, rather than display something like 'Unknown'

Related Topic