我的目标是编写一些可重用的代码来呈现基本的导航栏，因为这将是一项非常重复的任务。以下功能是我的首要目标:
- 每个页面都应该在 foreach 绑定(bind)中呈现
- 每个页面都应该抓取读取当前路由的事件状态
- 每个页面都应该异步或内联加载
这是我的第一次尝试。我希望标记是这样的
<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] 主题的帮助。有什么指点吗？
最佳答案
以下是构建它的方法。这只是示例。
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();
});
});
以及要加载的 View
测试.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
关于javascript - PagerJS如何构建导航栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20284585/