Knockout with class scoped properties

Question

I am using Knockout and have the ViewModel bound to my data object in my ASP.Net MVC 4 project quite nicely like so:

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

Now I want to refactor my JavaScript so that the logic is encapsulated inside a class:

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

And I am instantiating that object in my HTML page like so:

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

Now, I am getting the following error:
Error: Unable to parse bindings. Message: ReferenceError: 'properties' is undefined; Bindings value: foreach: properties

Here is the snipped HTML for the table bound to the ViewModel:

    <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>

I would appreciate it if someone could shed some light on what I am doing wrong.

Are you sure that you use the correct view model for the correct view? Because your code should work, in fact it works: jsfiddle.net/xY7Gx. You should log out the this.viewModel before the ko.applyBindings to see what is inside the viewmodel. — nemesv
Thanks for the tip. I have some functionality working now and figured it was the with:properties attribute in the div containing my table which was causing the problem. I have updated the HTML in my question.. could you please take a look to see why the with:properties would break? — Shailen Sukul

nemesv nemesv · Accepted Answer · 2013-04-05T05:17:54

With the data-bind="with: properties" you are already "in the context" of the properties property inside your div.

So when you write <tbody data-bind="foreach: properties"> KO tries to find the properties property inside your properties array.

What you need is to use to reference the current binding context with the $data.

So your foreach should look like this:

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

Knockout with class scoped properties

1 Answers