1

KnockoutJS と Twitter Bootstrap を使用して、単純なページ分割されたテーブル ビューを構築しています。現在、ページの読み込み時に最初のデータセットを読み込むことができないことを除いて、すべてが機能しています。ビュー モデルを見ると、RESTful API を介して顧客のリポジトリを "ナビゲート" するときに、適切なデータが読み込まれていることがわかります。

初期データをロードするにはどうすればよいですか?

<script>

    var ListViewModel = function() {
        var self = this;

        window.viewModel = self;

        //Properties
        self.list = ko.observableArray();
        self.pageSize = ko.observable(20);
        self.pageIndex = ko.observable(0);
        self.itemCount = ko.observable();

        self.maxPageIndex = ko.dependentObservable(function () {
            return Math.ceil(self.itemCount() / self.pageSize()) - 1;
        });

        self.allPages = ko.dependentObservable(function () {
            var pages = [];
            for (i = 0; i <= self.maxPageIndex() ; i++) {
                pages.push({
                    pageNumber: (i + 1)
                });
            }
            return pages;
        });


        //navigation Functions
        self.previousPage = function () {
            if (self.pageIndex() > 0) {
                self.pageIndex(self.pageIndex() - 1);
            }
            self.getItems();
        };

        self.nextPage = function () {
            if (self.pageIndex() < self.maxPageIndex()) {
                self.pageIndex(self.pageIndex() + 1);
            }
            self.getItems();
        };

        self.moveToPage = function (index) {
            self.pageIndex(index);
            self.getItems();
        };

        //API interactions
        self.getItems = function () {

            $.ajax({
                url: '/api/customer/?pageNumber='+self.pageIndex()+"&pageSize="+self.pageSize(),
                async: false,
                dataType: 'json',
                success: function (result) {
                    self.list(result);
                }
            });
        };

        self.getTotalItemCount = function() {
          //TODO: Add call to fetch total number of customers in the database and set      it to self.itemCount property.
        };


    };

    $(document).ready(function() {
        ko.applyBindings(new ListViewModel());
    });

</script>
4

1 に答える 1

1

開始コードを変更する

$(document).ready(function() {
   var vm =  new ListViewModel()
   vm.getItems()
   ko.applyBindings(vm)
});
于 2013-06-03T01:10:37.860 に答える