Unable to process binding “foreach: function (){return filter.filters }” Message: filter is not defined

Here's my viewmodel.

    window.makeApp.makeViewModel = (function (ko, datacontext) {

    //Data
    var self = this;
    self.makeLists = ko.observableArray();
    self.error = ko.observable();

    //Operations
    //Load initial state from the server, convert it to make instances, then populate self

    function MakePageModel(datacontext) {
            if (!datacontext) {
                datacontext = {};
        }

        //var self = this;
        //self.makes = ExtractModels(self, makeLists, makeList);

        var filters = [
            {
                Type: "text",
                Name: "Name",
                Value: ko.observable(""),
                RecordValue: function (record) { return record.name; }
            },
            {
                Type: "select",
                Name: "Status",
                Options: [
                    GetOption("All", "All", null),
                    GetOption("None", "None", "None"),
                    GetOption("New", "New", "New"),
                    GetOption("Recently Modified", "Recently Modified", "Recently Modified")
                ],
                CurrentOption: ko.observable(),
                RecordValue: function (record) { return record.status; }
            }
        ];
        var sortOptions = [
            {
                Name: "ID",
                Value: "ID",
                Sort: function (left, right) { return left.id < right.id; }
            },
            {
                Name: "Name",
                Value: "Name",
                Sort: function (left, right) { return CompareCaseInsensitive(left.name, right.name); }
            },
            {
                Name: "Status",
                Value: "Status",
                Sort: function (left, right) { return CompareCaseInsensitive(left.status, right.status); }
            }
        ];
        self.filter = new FilterModel(filters, self.makeLists);
        self.sorter = new SorterModel(sortOptions, self.filter.filteredRecords);
        self.pager = new PagerModel(self.sorter.orderedRecords);
    }

more code ..........

    datacontext.getMakeLists(makeLists, error); // load update makes

    return {
        makeLists: self.makeLists,
        error: self.error
    };
    })(ko, makeApp.datacontext);

     // Initiate the Knockout bindings
    ko.applyBindings(makeApp.makeViewModel);



Here's my html:

    <tr>
        <td class="LsSearch">

            <b>Filters:</b><br />

            <div class="" data-bind="foreach: filter.filters">
                <div>
                    <span data-bind="text: Name"></span>:<br />
                </div>
                <div data-bind="if: Type == 'select'">
                    <select data-bind="options: Options, optionsText: 'Name', value: CurrentOption"></select>
                </div>
                <div data-bind="if: Type == 'text'">
                    <input type="text" data-bind="value: Value, valueUpdate: 'afterkeydown'" />
                </div>
            </div>
            <br />
            <b>Sorts:</b>
            Field:
            <br />
            <select data-bind="options: sorter.sortOptions, optionsText: 'Name', value: sorter.currentSortOption"></select>
            Direction:
            <select data-bind="options: sorter.sortDirections, optionsText: 'Name', value: sorter.currentSortDirection"></select>
            <br />
            <br />

             <table>
                <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            Account ID
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Description
                        </th>

                    </tr>
                </thead>
                 <tbody data-bind="foreach: pager.currentPageRecords">
                     <tr>
                         <td>
                             <span data-bind="text: id"></span>
                         </td>
                         <td>
                             <span data-bind="text: accountId"></span>
                         </td>

                         <td>
                             <span data-bind="text: name"></span>
                         </td>
                         <td>
                             <span data-bind="text: description"></span>
                         </td>

                     </tr>
                 </tbody>
            </table>


        </td>