PagerJS how to build a navbar?

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:

Each page should be rendered in a foreach binding
Each page should grab the active state reading current route
Each page should be loaded either async or inline

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?

标签： javascript knockout.js pagerjs

1条回答

做个烂人

2楼-- · 2019-01-28 09:53

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

0人赞添加讨论(0) 举报

PagerJS how to build a navbar?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间