How to Bind Data with Knockout

Good Day All

i have a Strange issue here using the knockout lib. i have setup the Javascript like this

$(function () {
    $("#lstSearchOptions").change(function () {

        var data = {}
        data.id = $("#lstSearchOptions option:selected").val();
        $.getJSON("/Cars/SearchDetails", data, function (result) {
            var model = { 
                SearchOptionsR: ko.observableArray(result)
            } 
            ko.applyBindings(model, document.getElementById("tblsearchresults"));

        });
         
        $("#lstSearchOptions").blur(function () {
            $("#lstSearchOptions").hide("fast");
        });
    });  
});

and my HTML is defined like this

  <table class="ResultsStyle"  id="tblsearchresults" data-bind="foreach:SearchOptionsR" >
   
        <tr>
            <td rowspan="2"> 
   
                
            </td>
            <td>
                Make:<div data-bind="text: Make"></div> </td>
            <td colspan="2" rowspan="2">
                 
                <a href="#">View Report </a>
            </td>
        </tr>
        <tr>
            <td>
                Year: <div data-bind="text: Year"/></td>
        </tr>
        <tr>
            <td> </td>
            <td>
                Model</td>
            <td>
                <div data-bind="text: Model"></div></td>
            <td> </td>
        </tr> 
    </table> 

This code it is a partial view that is hosted and called like this

    @Html.Partial("_Searchplain")

and the java-script are rendered on top of the Page Layout

@Styles.Render("~/Content/searchcss") 

when running my Project i get the Following error

2
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: SearchOptionsR is not defined;
Bindings value: foreach:SearchOptionsR


Thanks

Thank you for posting at Dotnetfunda
[Administrator]