问

PagerJS如何构建导航栏？

发布于 2023-02-13 19:37

foreach

html

function

callback

push

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

每个页面都应该以foreach绑定方式呈现

每个页面应该抓住当前路径的活动状态

每个页面都应加载async或inline

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

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

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;
  self.pages = [];
  self.pages.push(new PageItem('dashboard', ""));
  self.pages.push(new PageItem('offerJoin', 'Offer'));
}

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

我需要[1],[2]和[3]主题的帮助.任何指针？

1 个回答

以下是如何构建它的方法.这只是一个例子.

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

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

以下是如何做到这一点.

第一个index.html

<html>
    <head>
        <script data-main="index.js" type="text/javascript" src="lib/require.js"></script>
    </head>
<body>
    <div class="container" >
    <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>

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

和加载的意见

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

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

您可以在此处下载演示

2023-02-13 19:39 回答

mobiledu2502860153

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签