是否可以将多个不相交的元素与 Pager.js 中的页面相关联？答案

【问题标题】：Is it possible to associate multiple, disjoint elements to pages in Pager.js?是否可以将多个不相交的元素与 Pager.js 中的页面相关联？
【发布时间】：2014-07-13 03:41:48
【问题描述】：

我正在构建一个应用程序，并从 Knockout 开始。我们已经到了需要实现分页的地步，看起来在 Knockout 中实现分页的实际库是 Pager.js。

Pager 很好，而且非常易于使用，但我们有一个用例，我无法找到 Pager 解决方案。

在我们的许多页面中，我们希望能够在页面上的多个不相交的元素中显示某些内容。（不知道“不相交”是否是正确的术语；真正的意思是没有任何联系的元素，就像在 DOM 树的完全独立的分支中一样。）例如，我们可能希望在标题中显示某些内容，页脚或菜单以及 Pager 将呈现的主 UI。

到目前为止，Pager 似乎只将一个页面链接到一个元素，这是它根据哪个页面处于活动状态而显示/隐藏的元素。

有没有办法让 Pager 显示/隐藏多个不相交的元素？我是否必须依靠回调之类的东西来完成这项工作？（我知道 Pager 显示/隐藏页面时有回调，我认为这些可以用来实现这一点，但如果 Pager 为我处理这个会更好。）

如果 Pager 并不真正支持这个用例，是否有另一个与 Knockout 兼容的类似库可以尝试？或者，甚至，是否有另一种完全支持 Knockout 的替代方案（AngularJS、Ember 等）？

编辑：看看 Ember，我正在寻找的是 described here and their "outlets" features（页面上的最后一个示例）。因此，将寻找与 Knockout 有点相似的功能。我确实认为我可以使用一些 Knockout 回调来模仿这一点，但它可能会涉及很多 jQuery 来移动或隐藏/显示东西。我宁愿不必这样做，因为随着时间的推移和应用程序变得越来越大，这将变得更加令人头疼。

【问题讨论】：

标签： knockout.js single-page-application pager pagerjs

【解决方案1】：

是的，而且很容易实现。阅读http://knockoutjs.com/documentation/binding-context.html

基本上，您只需使用$parent、$parents[x] 或最终$root 即可访问不在您用作上下文的对象级别的可观察对象。

这里是一个例子（是否使用 pager.js 并不会改变它的工作方式）：

var viewModel = {
  user: {
    id: ko.observable(1),
    name: ko.observable('John')
  }
  menu: {
    links: {
      about: 'about.html',
      index: 'index.html'
    }
  }
};

使用此 HTML ：

<div id="header">
  <p>Your name is <span data-bind="text: user.name"></span></p>
</div>
<div id="menu" data-bind="with: menu">
  <p>Your name is still <span data-bind="text: $parent.user.name"></span></p>
  <p>Your name is still <span data-bind="text: $parents[0].user.name"></span></p>
  <p>Your name is still <span data-bind="text: $root.user.name"></span></p>
</div>

【讨论】：