PagerJS 如何构建导航栏? [英] PagerJS how to build a navbar?

查看：17
本文介绍了PagerJS 如何构建导航栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的目标是编写一些可重用的代码来呈现基本的导航栏，因为这将是一项非常重复的任务.以下功能是我的首要目标:

  • 每个页面都应该在 foreach 绑定中呈现
  • 每个页面都应该抓取当前路由的活动状态
  • 每个页面都应该异步或内联加载

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

 
    <li><!--[1]这里需要一个切换器来显示活动/非活动状态，即类绑定.--><a data-bind='html: caption, click: $data.load'></a>

每个页面项目应该是这样的

function PageItem(id, caption) {this.id= id;this.caption = 标题；this.page = pager.page.find(id);this.load = function() {//[2]//这里的代码触发页面加载，//即 this.page.async(someCallback, this.id);}this.active = function() {//[3]返回 this.page.isVisible();}}

使用目标:

function VM() {var self = this;self.pages = [];self.pages.push(new PageItem('dashboard', "<i class='fa-icon-home'></i>"));self.pages.push(new PageItem('offerJoin', 'Offer'));}var vm = new VM();pager.extendWithPage(vm)ko.applyBindings(vm);pager.start('仪表板');

我需要有关 [1]、[2] 和 [3] 主题的帮助.任何指针?

解决方案

这是您构建它的方法.这只是示例.

app的结构是这样的，你可以自定义.

app//index.js/index.html//库//pager.js/require.js/knockout-3.0.0beta.js/意见//test.html/test1.html

这就是你可以做到的.

第一个 index.html

<头><script data-main="index.js" type="text/javascript" src="lib/require.js"></script><身体><div class="container" style="padding-top: 30px;"><span id="span" onclick = 'clickme(this)'>我是span</span><div data-bind="page: {id: 'start' , title : 'First Page'}">您当前正在查看第一页的内容.<br/><a href="#!/start/deep">第一个孩子</a><br/><a href="#!/start/second">第二个孩子</a><br/><br/><div data-bind="page: {id: 'deep', title: 'Second Page',role: 'start', source: 'views/test1.html'}">您当前正在首页中查看首页的内容.<br/><a data-bind="page-href :'../second'" >Second Child</a>

<div data-bind="page: {id: 'second', title : 'Second Page', source: 'views/test.html'}">您当前正在查看第二页内第二页的内容.<br/><a data-bind="page-href :'../deep'" >第一个孩子</a>

<br/><br/><br/><a href="#!/structure">转到结构</a>

<div data-bind="page: {id: 'structure', title : 'Second Page'}">您当前正在查看第二页的内容.<br/><a href="#!/start">转到开始</a>

下一个 index.js

requirejs.config({垫片:{引导程序:['jquery']，hashchange:['jquery']},路径:{jquery:'lib/jquery-1.10.2',淘汰赛:'lib/knockout-3.0.0beta'，寻呼机:'库/寻呼机'}});requirejs(['jquery','knockout','pager'], 函数 ($, ko,pager) {函数 PagerViewModel(){var self = this;}$(函数(){pager.Href.hash = '#!/';pager.extendWithPage(PagerViewModel.prototype);ko.applyBindings(new PagerViewModel());pager.start();});});

以及要加载的视图

test.html

第二页
<p>这是pager.js加载的测试视图</p><p>主页面加载时视图加载ajax请求</p><p>所有需要加载的页面用ajax只加载一次</p><p>导航页面时不会再次加载</p><a data-bind="page-href :'../deep'" href="#">第一个孩子</a>

test1.html

首页
<p>这是 pager.js 加载的另一个页面</p><a data-bind="page-href :'../second'" href="#">Second Child</a>

你可以看到我是如何创建导航栏的，标题是first child和second child.

您可以在这里

下载演示

My goal is to write some reusable code to render basic navbars, since it would be a very repetitive task. The following features are my first goal:

Here's my first attempt. I want markup to be something like this

             <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>

Each page item should look something like this

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();
  }
}

Usage goal:

function VM() {
  var self = this;
  self.pages = [];
  self.pages.push(new PageItem('dashboard', "<i class='fa-icon-home'></i>"));
  self.pages.push(new PageItem('offerJoin', 'Offer'));
}

var vm = new VM();
pager.extendWithPage(vm)
ko.applyBindings(vm);
pager.start('dashboard');

I need help with [1], [2] and [3] topics. Any pointer?

解决方案

Here is how you can built it. This is only example.

The structure of app is like this which you can customize.

app/
   /index.js
   /index.html/
   /lib/
       /pager.js
       /require.js
       /knockout-3.0.0beta.js
   /views/
         /test.html
         /test1.html

And here is how you can do it.

First index.html

<html>
    <head>
        <script data-main="index.js" type="text/javascript" src="lib/require.js"></script>
    </head>
<body>
    <div class="container" style="padding-top: 30px;">
    <span id="span" onclick = 'clickme(this)'>I am span</span>
        <div data-bind="page: {id: 'start' , title : 'First Page'}">
            you are currently viewing the content of first page. <br />
            <a  href="#!/start/deep">first child</a><br />
            <a  href="#!/start/second">second child</a><br />
        <br />
        <div data-bind="page: {id: 'deep', title : 'Second Page',role: 'start', source: 'views/test1.html'}">
            you are currently viewing the content of first page inside First Page.
            <br />
            <a data-bind="page-href :'../second'" >Second Child</a>
        </div>  
        <div data-bind="page: {id: 'second', title : 'Second Page', source: 'views/test.html'}">
            you are currently viewing the content of second page inside Second Page.
            <br />
            <a data-bind="page-href :'../deep'" >First Child</a>
        </div>          
        <br />
        <br />
        <br />
        <a  href="#!/structure">Go to Structure</a>
        </div>
        <div data-bind="page: {id: 'structure', title : 'Second Page'}">
            you are currently viewing the content of second page.<br />
            <a  href="#!/start">Go to Start</a>
        </div>
    </div>
</body>
</html>

Next index.js

requirejs.config({
    shim:{
        bootstrap:['jquery'],
        hashchange:['jquery']
    },
    paths:{
        jquery:'lib/jquery-1.10.2',
        knockout:'lib/knockout-3.0.0beta',
        pager:'lib/pager'
    }
});

requirejs(['jquery','knockout','pager'], function ($, ko,pager) {

    function PagerViewModel(){
        var self    =   this;
    }

    $(function () {
        pager.Href.hash = '#!/';
        pager.extendWithPage(PagerViewModel.prototype);
        ko.applyBindings(new PagerViewModel());
        pager.start();
    });
});

And the views to load

test.html

<h3>Second Page</h3>
<p>This is a test view loaded by pager.js</p>
<p>The view loads with ajax request when the main page loads</p>
<p>All the pages that need to be loaded are loaded only once with ajax</p>
<p>while navigating the pages are not loaded again</p>

<a data-bind="page-href :'../deep'" href="#">First Child</a>

test1.html

<h3>First Page</h3>
<p>This is yet another page loaded by pager.js</p>
<a data-bind="page-href :'../second'" href="#">Second Child</a>

You can see how i created navigation bar the titles are first child and second child.

You can download the demo here

这篇关于PagerJS 如何构建导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆