PagerJS как построить навигатор?

Моя цель - написать код многократного использования для визуализации базовых навигаторов, поскольку это будет очень повторяющаяся задача. Следующие функции моя первая цель:PagerJS как построить навигатор?

Каждая страница должна быть оказаны в Еогеасп связывания
Каждая страница должна захватить активное состояние чтения текущего маршрута
Каждая страница должна быть загружена либо асинхронном или встроенный

Это моя первая попытка. Я хочу разметить быть что-то вроде этого

   <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]. Любой указатель?

источник

2013-11-29 brazorf

Вот как вы можете его построить. Это только пример.

Структура приложения подобна этой, которую вы можете настроить.

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

источник

2013-12-04 13:29:21

Perfect !!! Это только что запустило меня и быстро заработало –

Спасибо. Я рад, что кто-то его использует! –

ответ

Смежные вопросы