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.

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.

• javascript
• html
• knockout.js
• knockout-1.2

1 Answer 1

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'