0

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

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

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

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

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

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

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

4

1 回答 1

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>
于 2014-05-24T03:25:07.020 回答