具有类范围属性的淘汰赛

Question

我正在使用 Knockout 并将 ViewModel 绑定到我的 ASP.Net MVC 4 项目中的数据对象，就像这样：

$(document).ready(function() {
properties = @Html.Raw(Json.Encode(Model));
selectedProperty = properties[0];
viewModel = { properties: ko.mapping.fromJS(@Html.Raw(Json.Encode(Model))), selectedProperty:  ko.observable()}; 
viewModel.setItem = function(item) {
viewModel.selectedProperty(item);   
}
ko.applyBindings(viewModel);

现在我想重构我的 JavaScript 以便将逻辑封装在一个类中：

RealEstate.Search = function (properties) {
    this.properties = properties;
    this.selectedProperty = this.properties[0];
    this.viewModel = { properties: ko.mapping.fromJS(this.properties), selectedProperty:  ko.observable()}; 
    this.viewModel.setItem = function(item) {
    viewModel.selectedProperty(item);   
    }        
    ko.applyBindings(this.viewModel);
}

我正在我的 HTML 页面中实例化该对象，如下所示：

$(document).ready(function() {
search = new RealEstate.Search(@Html.Raw(Json.Encode(Model))); 
     }

现在，我收到以下错误：
错误：无法解析绑定。 消息：ReferenceError：“属性”未定义； 绑定值：foreach:properties

这是绑定到 ViewModel 的表格的 HTML 片段：

    <div id="divDataTable" data-bind="with: properties">

        <table id="dataTable" class="tablesorter">
            <thead>
                <tr>
                    <th>Address
                    </th>
                    <th>
                       Suburb
                    </th>
                    <th>Price
                    </th>
                    <th>Beds
                    </th>
                    <th>Baths
                    </th>
                    <th>Days Listed
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: properties">
                <tr data-bind="click: $root.setItem">
                    <td>
                        <label data-bind="text: $data.Street"></label>
                        <input data-bind="attr: { value : $index(), id : $index(), name : $index() }" type="hidden" />
                    </td>
                    <td data-bind="text: $data.Suburb"></td>
                    <td data-bind="text: $data.PriceFormatted"></td>
                    <td data-bind="text: $data.NumOfBedrooms"></td>
                    <td data-bind="text: $data.NumOfBathrooms"></td>
                    <td data-bind="text: $data.DaysListed"></td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
<div id="divProperty">
    <aside class="float-right" data-bind="with: selectedProperty">
        <table>
            <tr>
                <td>
                    <label data-bind="text: $data.Street"></label>
                </td>
                <td>
                    <label data-bind="text: $data.PriceFormatted"></label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <img src="#" /></td>
            </tr>
            <tr>
                <td>Beds:
                <label data-bind="text: $data.NumOfBedrooms"></label>
                </td>
                <td>On OZMite:
                <label data-bind="text: $data.DaysListed"></label>
                </td>
            </tr>
            <tr>
                <td>Baths:
                <label data-bind="text: $data.NumOfBathrooms"></label>
                </td>
                <td>Year built:</td>
            </tr>
        </table>
    </aside>

如果有人能说明我做错了什么，我将不胜感激。

Answer 1

使用data-bind="with: properties"，您已经在div 内的properties 属性的“上下文中”。

因此，当您编写 <tbody data-bind="foreach: properties"> 时，KO 会尝试在您的 properties 数组中查找 properties 属性。

您需要使用$data 来引用当前的binding context。

所以你的 foreach 应该是这样的：

<tbody data-bind="foreach: $data">       
   ...
</todby>