无法加载Knockout组件 - 未知模板值：[object Object]

Question

这就是我使用组件并使用自定义元素发送参数的方式：

<div class="container" data-bind="with: DevoteeList">
        <div class="row" style="padding: 10px;">
            <div class="col-md-8"></div>
            <div class="col-md-4">
                <ko-pager params="Data: Devotees, 
                    Modifier: $parent.DevoteeModifier, 
                    PageCount: DevoteesPageCount(), 
                    Url: '@Url.Action("SelectDevotees", "Devotee", new { a = 1 })'"></ko-pager>
            </div>
        </div>

这就是我定义Knockout组件的方法。我想在少数地方使用寻呼机。但是，我收到错误：Uncaught Error: Unable to process binding "with: function (){return SelectDevotees }" Message: Unable to process binding "with: function (){return DevoteeList }" Message: Unable to process binding "component: function () { return l }" Message: Component 'ko-pager': Unknown template value: [object Object]

ko.components.register('ko-pager', {
        viewModel: function (params) {
            var self = this;
            self.currentPage = ko.observable(1);
            self.pages = ko.observableArray([]);
            self.PageCount = ko.observable(params.PageCount);



        //self.currentPage.subscribe(function (nv) {
        //    self.GetPage(self.parent);
        //});

        self.GetPages = function () {
            for (var i = 1; i <= params.PageCount ; i++) {
                self.pages.push(i);
            }
            return self.pages;
        };

        self.FirstPage = function () {
            self.GetPage(1);
        };
        self.PrevPage = function () {
            if (self.currentPage() > 1) {
                var pn = self.currentPage() - 1;
                self.GetPage(pn);
            }
        };
        self.LastPage = function () {
            self.GetPage(params.PageCount);
        };
        self.NextPage = function () {
            if (self.currentPage() < params.PageCount) {
                var pn = self.currentPage() + 1;
                self.GetPage(pn);
            }
        };

        self.GetPage = function (pg) {
            if (pg == null)
                pg = self.currentPage();
            else
                self.currentPage(pg);
            var url = params.Url + '&pageNumber=' + pg;
            $.get(url, function (data) {
                var t = ko.mapping.fromJS(data);
                if (params.Modifier) {
                    params.Modifier(t);
                }
                params.Data(t());
            });
        };
    },
    template: { element: document.getElementById('ko-ajax-pager') }
});

<div id="ko-ajax-pager" style="display: none;">
    <div class="row" style="padding: 10px;" data-bind="visible: PageCount > 1">
        <div class="col-md-1"></div>
        <div class="col-md-2">
            <input type="button" value="First" class="btn" data-bind="click: FirstPage" />
        </div>
        <div class="col-md-2">
            <input type="button" value="Prev" class="btn" data-bind="click: PrevPage" />
        </div>
        <div class="col-md-2">
            <select data-bind="options: GetPages(), value: currentPage, event: { change: GetPage(null) }">
            </select>
        </div>
        <div class="col-md-2">
            <input type="button" value="Next" class="btn" data-bind="click: NextPage" />
        </div>
        <div class="col-md-2">
            <input type="button" value="Last" class="btn" data-bind="click: LastPage" />
        </div>
        <div class="col-md-1"></div>
    </div>
</div>

有人可以弄清楚，出了什么问题？