javascript - Pager.js : How to lazy load bindings

Question

我试图弄清楚如何将 Pager.js 与 Knockout.js 结合使用来延迟加载页面并绑定(bind)其内容。我正在尝试翻译 demo example ，但我不熟悉 require.js 并且我只是迷路了。

我花了几个小时尝试使用 jQuery 的 getJSON 而不是 require 和 define 重新实现系统，但绑定(bind)却默默失败。我有两个问题:

1. View 模型是一个 JSON 数组，所以我不知道这个数组叫什么
2. 该代码实际上并未执行 getJSON 请求(日志中没有任何内容)。并且正在悄然失败。

代码如下:

<div data-bind="page: {id: 'history', title: 'History', withOnShow: $root.getHistory }">

var ViewModel = function (data) {
  var self = this;
  ko.mapping.fromJS(data, {}, self);

  self.getHistory = function () {
    return function (f) {
      $.getJSON("@{HistoryR}", function (data) {
        viewModel.history = ko.mapping.fromJS(data, {});
        f(viewModel.history);
      });
    }
  }          
};

$.getJSON("@{HomeR}", function (data) {
  viewModel = new ViewModel(data);
  pager.extendWithPage(viewModel);
  ko.applyBindings(viewModel);
  pager.start();
});

我重构了一些代码，以适应 huocp 的答案:

  self.getExamHistory = function (f) {
    $.getJSON("@{ExamHistoryR}", function (data) {
      self.history = ko.mapping.fromJSON(data, {});
      f(self.history);
    });
  }

并且 getJSON 调用被触发(并且我在控制台中看到响应)，但我的 viewModel.history 仍然为空。

Answer 1

您对 withOnShow 回调函数进行了错误的包装。

去掉包装，应该没问题:-)

self.getHistory = function (f) {
  $.getJSON("@{HistoryR}", function (data) {
    self.history = ko.mapping.fromJS(data); // can u try self instead of viewModel
    f(self.history);
  });
};

Pager.js 演示页面额外换行的原因是它使用 withOnShow: requireVM('invention')，而不是 withOnShow: requireVM。它使用 requireVM 函数的返回值，而不是函数本身。