javascript - knockoutjs Throws Unable to parse binding attribute - Stack Overflow

admin管理员组

文章数量:1335083

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

Share Improve this question Follow edited Feb 24, 2015 at 10:13 Jeroen 63.9k4646 gold badges228228 silver badges366366 bronze badges asked Jun 9, 2011 at 14:07 MohitMohit 92244 gold badges1414 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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'

本文标签： javascriptknockoutjs Throws Unable to parse binding attributeStack Overflow