标签: pagerjs

PagerJS可以获取URL参数并将它们绑定到模型.例如,在本例来自PagerJS网站(参见链接)中,当您点击该链接时,它将导航到#/user?first=Philip&last=Fry并显示数据绑定子页面,显示"Philip Fry":

<a class="btn" data-bind="page-href: {path: 'user', params: {first: 'Philip', last: 'Fry'}}">Send parameter to page</a>

<div data-bind="page: {id: 'user', params: ['first','last']}" class="well-small">
    <div>
        <span>First name:</span>
        <span data-bind="text: first"></span>
    </div>
    <div>
        <span>Last name:</span>
        <span data-bind="text: last"></span>
    </div>
</div>

这是一种单向绑定:如果observable发生更改,由于页面上的用户操作,URL将不会更新.

使用PagerJS时,建议使用URL参数与observable同步的方法是什么？

我想在URL参数中存储用户动态创建的搜索条件(通过选择一组UI控件生成),这样他/她可以与其他人共享URL或将其加入书签,当然,所有这些都无需重新加载页面.

新手问题.我认为pagerjs是一个适用于淘汰赛的客户端框架.那我为什么需要安装node.js呢？没有节点有什么办法吗？或者我错了它是如何工作的？

我的目标是编写一些可重用的代码来渲染基本的导航栏,因为这将是一个非常重复的任务.以下功能是我的第一个目标:

• 每个页面都应该以foreach绑定方式呈现
• 每个页面应该抓住当前路径的活动状态
• 每个页面都应加载async或inline

这是我的第一次尝试.我希望标记是这样的

             <ul data-bind='foreach: pages'>
                <li>
                  <!-- 
                   [1]
                   Here a toggler is needed for active/no-active status,
                   i.e. a class binding.
                   -->
                  <a data-bind='html: caption, click: $data.load'></a>
                </li>
              </ul>

每个页面项应该看起来像这样

function PageItem(id, caption) {
  this.id= id;
  this.caption = caption;
  this.page = pager.page.find(id);
  this.load = function() {
    // [2]
    // Code here to trigger page load,
    // i.e. this.page.async(someCallback, this.id);
  }
  this.active = function() {
    // [3]
    return this.page.isVisible();
  }
}

使用目标:

function VM() {
  var self = this; …

如果要创建pagerjs应用程序,如何设置活动已打开的路径.例如

<div class="tabs">
    <a data-bind="page-href:'opt1'">opt1</a> | 
    <a data-bind="page-href:'opt2'">opt2</a>
    </div>

<div class="server" data-bind="page:{id:'opt1')}">
                </div>

有一个css:{selected:isVisible}绑定很容易但是看起来像是什么？它在文档中提到了这一点,但未显示isVisible的外观.pagerjs中有什么东西可以绑定吗？