0

私は 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: プロパティ

以下は、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>

誰かが私が間違っていることに光を当てることができれば幸いです。

4

1 に答える 1

1

を使用すると、すでに内のプロパティdata-bind="with: properties"の「コンテキスト内」にいます。propertiesdiv

したがって、KO を記述すると、配列 内のプロパティ<tbody data-bind="foreach: properties">を見つけようとします。propertiesproperties

必要なのは、現在のバインディング コンテキストを で参照するために使用すること$dataです。

したがって、foreach は次のようになります。

<tbody data-bind="foreach: $data">       
   ...
</todby>
于 2013-04-05T05:17:54.973 に答える