Question

我正在使用Knockout，并且在我的ASP.Net MVC 4项目中将ViewModel绑定到我的数据对象非常好：

$(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：'properties'未定义; 绑定值：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"，您已经位于properties内div媒体资源的“上下文”中。

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

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

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

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

具有类范围属性的Knockout

1 个答案: