javascript - How can I create a "sliding pages" effect in KnockoutJS? -

i have different pages slide in , out of viewport knockoutjs.

my page doesn't use jquery, i'd avoid it.

it should use css transitions.

this can done binding, first need helper function our buttons. returns click handler sets observable specific value. can used data-bind="click: page.set(1).

ko.observable.fn.set = function(value) {   var obs = this;   return function(){ obs(value); } } 

now our html have binding in page container (.pages) telling page on. each page has simple class use in describe them.

<div class="pages" data-bind="page: page">   <div class="page text-center">     <h1>page 1</h1>     <button class="btn" data-bind="click: page.set(1)">go page 2</button>   </div> </div> 

our css little strange. need make .pages larger body, , hide horizontal scroll bars. note can divide 10,000 our .pages width our .page width -- true. have simple transition sliding between pages.

html, body { width: 100%; height: 100%; overflow-x: hidden; }  .pages {    width: 10000%; height: 100%; position: relative;    transition: left .5s ease-in-out; }  .page { width: 1%; height: 100%;  float: left;} 

finally, our binding handler sees page is, , determines correct size. note page 0 first.

ko.bindinghandlers.page = {   update: function(element, valueaccessor) {     var position = ko.unwrap(valueaccessor());      console.log(position);     element.style.left = position * -100 + "%";   } }  ko.applybindings({page: ko.observable(0)}); 

now can bind our page observable.

ko.applybindings({page: ko.observable(0)}); 

and demo wrap up