Question

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

每个页面都应该以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;
  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');

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

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

下一个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的导航栏。

您可以下载演示here

PagerJS如何构建导航栏？

1 个答案: