asp.net mvc - Knockout with class scoped properties -

i using knockout , have viewmodel bound data object in asp.net mvc 4 project quite nicely 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 want refactor javascript logic encapsulated inside 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 instantiating object in html page so:

$(document).ready(function() { search = new realestate.search(@html.raw(json.encode(model)));       } 

now, getting following error:
error: unable parse bindings. message: referenceerror: 'properties' undefined; bindings value: foreach: properties

here snipped html table bound 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 appreciate if shed light on doing wrong.

with data-bind="with: properties" "in context" of properties property inside div.

so when write <tbody data-bind="foreach: properties"> ko tries find properties property inside properties array.

what need use reference current binding context $data.

so foreach should this:

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