knockoutjs 引发无法解析绑定属性

Posted 2023-03-27

【中文标题】knockoutjs 引发无法解析绑定属性

【英文标题】：knockoutjs Throws Unable to parse binding attribute

【发布时间】：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 网站的示例。

【参考方案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，因为它们无需任何额外工作即可处理空值。虽然，它不会呈现该部分，而不是显示类似“未知”的内容