PagerJS how to build a navbar?

后端未结

关注

 1  433

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 s

相关标签:

1条回答

礼貌的吻别

2021-01-20 06:05

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)