Question

我正在尝试使用Pager.js来创建单页应用。我有以下结构：

#word/definition
#word/example
#word/synonym

因此definition，example等是具有page绑定的div：

<div data-bind="page: {id: 'word'}">
  <div data-bind="page: {id: 'definition'}">
    <-- stuff goes here -->
  <div data-bind="page: {id: 'example'}">
    <-- stuff goes here -->

等等。

现在，正好相反，每个单词都有一个ViewModel用于所有路由，这些路由由JSON服务器处理程序提供服务：

{ definition: "A blah blah blah"
, example: "Don't mess with Texas"
, synonym: "fubar"
}

如何以三种路线“共享”它的方式加载ViewModel？我尝试将其加载为

<div data-bind="page: {id: 'word', withOnShow: getJsonWord}>
  <div data-bind="page: {id: 'definition'}">
    <-- stuff goes here -->
  <div data-bind="page: {id: 'example'}">
    <-- stuff goes here -->

其中getJsonWord是一个击中服务器并啜饮JSON的函数。它被触发，我看到了一个JSON响应。但是当我有这样的页面结构时，所有的子div都是可见的。寻呼机不会在它们之间切换。

Answer 1

我猜你当前的getJsonWord正在进行jquery异步ajax调用，这意味着最终的JSON不是直接从函数调用返回的。

你需要为pager.js包装你的ajax调用以注入一个回调。

vm构造函数中的Javascript

your_root_vm.getJsonWord = function(callback) {
  $.getJSON(your_url, function(data) { callback(data); });
};

对于你提到的其他问题，所有观点都是可见的，如果可能，请提供一个jsfiddle。

带有Lazy Bindings的Pager.js

1 个答案: