knockoutjs 引发无法解析绑定属性答案

【问题标题】：knockoutjs Throws Unable to parse binding attributeknockoutjs 引发无法解析绑定属性
【发布时间】：2011-09-11 18:04:42
【问题描述】：

我正在尝试使用 knockoutjs 1.2.l 和以下代码

$(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
});

下面是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>

抛出异常。

无法解析绑定属性。消息：TypeError: selectedCategory() 未定义；属性值：text: selectedCategory().Text

但是，如果我将 javascript 更改为遵循它的工作原理

$（函数（）{ 变量视图模型 = { 类别：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); // 使 Knockout 开始工作 });

我只关注来自 knockout.js 网站的示例。

【问题讨论】：

标签： javascript html knockout.js knockout-1.2

【解决方案1】：

你会想要在你的第一段标签中检查 null，比如：

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

在您的第二个 sn-p 代码中，它正在工作，因为它正在从 viewModel.categories 中读取 Text 和 Value 属性，这些属性只是空的。如果你想设置一个默认值，那么你会想做类似viewModel.chosenCategory = ko.observable(viewModel.categories()[0]);

另一种选择是对该部分使用模板并传入 selectedCategory，因为它们无需任何额外工作即可处理空值。虽然，它不会呈现该部分，而不是显示类似“未知”的内容

【讨论】：