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

Code:

---

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

Code:

---

  <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

Code:

---

    @Html.Partial("_Searchplain")

---

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

Code:

---

@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