pager.js - single page application framework for KnockoutJS

[oscar.f...@gmail.com]

Hi,

I've just released pager.js (http://oscar.finnsson.nu/pagerjs/). It is a set of custom bindings (page, page-href, page-accordion-item at the moment) that enables you to write large scale single page applications in KnockoutJS. Support for things like jumping between pages, deep navigation into pages, loading frames on demand, loading external html on demand into pages, load view models into pages on demand, etc. Check out the web site or github repo for full docs.

Happy hacking!

-- Oscar

[shaunne...@googlemail.com]

Interesting idea, very similar to jQuery's mobile way of detecting changes to the hash but I like how you have tied it into knockout. Keep up the good work!

[Roy Jacobs]

Interesting! Could you pop up a simple example page somewhere though? That would be very helpful.

[Павел Климашкин]

I think would be great to see demo

понедельник, 13 августа 2012 г., 1:28:16 UTC+4 пользователь oscar.f...@gmail.com написал:

[Voltron]

This looks very interesting. :)

+1 Demo app

Could you post some examples? Is there an AMD or Common. JS version?

Thanks

[Voltron]

Would it work with lodash? https://github.com/bestiejs/lodash/

[oscar.f...@gmail.com]

I've just uploaded a demo site on http://oscar.finnsson.nu/pagerjs/demo/ for anyone that is interested.

It is just describing the first features pager.js is capable of. Maybe I'll get some time this Sunday to complete the demo site.

@Voltron: I'm now building both AMD and non-AMD versions of pager.js. Check in the dist-folder for pager.amd.min.js for the AMD-version. The demo-site is using the AMD-version with require.js and lodash (instead of underscore.js) and it seems to work :)

[Joe Feser]

Love the demo. Just forked it.

[Matthew Schinckel]

Hey, I like the look of this.

I'd like to see it work with the HTML5 history API.

[Garris Shipon]

Wow -- nice!

[Павел Климашкин]

Good, but I think single page with "hash"-url is obsolete. History API with classic urls is true!

понедельник, 13 августа 2012 г., 1:28:16 UTC+4 пользователь oscar.f...@gmail.com написал:

Hi,

[oscar.f...@gmail.com]

I've updated pager.js (https://github.com/finnsson/pagerjs) and bumped the version to 0.4.

News are:

* guards - that validate before the navigation is completed

* pick up URI parameters as observables inside the page (useful for search forms)

* custom view-loaders (e.g. using requirejs)

* "modals"

* loaders

* change the page title as you change page

* callbacks on naviateFailed, beforeShow, afterShow, beforeHide, afterHide

* custom show/hide-methods (e.g. fadeIn/fadeOut or slideUp/slideDown)

* easier to inherit from the page-binding (more extension points, etc) in order to create your own page-binding

pager.js is 2.6k gzipped and minified.

You can still see the demo at: http://oscar.finnsson.nu/pagerjs/demo/

-- Oscar

[Casey Corcoran]

Great work Oscar! I've been working on a similar project in my spare time which isn't public yet but it's a similar concept...

Thanks for sharing.

Casey Corcoran

casey.c...@gmail.com

[Acaz Souza Pereira]

+1 for history API with classic urls.

[oscar.f...@gmail.com]

Thanks for the great response and feedback!

On popular request I've done two things:

* a node.js-example app (https://github.com/finnsson/pagerjs/tree/master/boilerplate) where pager.js is demonstrated with History.js for handling classical URLs.

Just clone it and

$ cd boilerplate

$ npm install

$ node app.js

*  While working on the node.js app I realized that I had taken a naïve approach to handling html5 history with the "page-href"-binding. Now we got a page-hash binding for #, page-href5 for classical URLs and page-href where page-href can be configured to either be page-hash or page-href5. All bindings are classes to they can easily be inherited from and extended as needed. The page-href5 binding got a configuration property pager.Href5.history that defaults to "window.history" but can be set to "window.History" if you're using History.js

I've also added some effects (http://oscar.finnsson.nu/pagerjs/demo/#fx) that should be used with care. Neither zoom nor flip got fallbacks at the moment.

Finally a more complete documentation with references to demo-pages is at the end of the demo (http://oscar.finnsson.nu/pagerjs/demo/#recapitulation).

@caseyc: I hope you'll publish something. Would be interesting to see other solutions to this problem.

-- Oscar

Den söndagen den 12:e augusti 2012 kl. 23:28:16 UTC+2 skrev oscar.f...@gmail.com:

[Voltron]

Would this work with curl.js(https://github.com/cujojs/curl) and
lodash? I discovered that require.js was very hard to use when
developing mobile/Phonegap applications. Is the framework dependent on
twitter bootstrap? I would like to use Zurb foundation instead.

Thanks

[szabolc...@gmail.com]

Oh, it's not obsolete; History.js has a couple of opened issues which bit me hard (and will not be fixed anytime soon) and of course the History API is not really supported by current Internet Explorers... so if you are working on pet projects, the history API is the way to go, but for an admin interface (no seo) I would use the hash/hashbang solution for sure - so I'm quite happy to see this library.

[Oscar Finnsson]

I haven't tested it with curl.js but if it understands 'require(..., funtion(...){...})' it should be ok. The amd-version should work (look in the dist folder). If not submit an issue.

The framework got no dependencies on bootstrap. The only dependencies are jquery, underscore/lodash and knockoutjs. 

-- oscar

[Casey Corcoran]

Just rolled out a project using Knockout and figured I'd share with the group:

http://www.1stavemachine.com/

Best viewed in webkit, it's kind of a live "beta" and may not be fully backwards compatible...

The site was already built when I got it . I added the knockout powered "carousel" on the home page which uses Vimeo's api to get data and their "Froogaloop" JS api to feed observables in the custom playback controls, etc.

Also check out the projects section which is Knockout-powered as well.

Knockout is such a pleasure to work with, thanks again KO team!

Casey Corcoran

casey.c...@gmail.com

[Michael "Kato" Wulf]

Bitchin site! The shadows on the carousel that lift during hover are a very nice touch.

Good layout, interesting content. My only addition--were it my project--would be to try and transition between the pages (slide them in/out somehow to complete the paradigm and visual sleekness).

Why did you pick knockout for this one?

--
Michael Wulf

775-235-8398

web site | contact

[Casey Corcoran]

Right, it was my intention to build it into a single-page site and do more transitioning, but that's a "phase next" item for now.

I've been using knockout for a good while now, am comfortable and enjoy working with it so it was a no brainer for me :)

Casey Corcoran

casey.c...@gmail.com

[vinni...@gmail.com]

Hey Oscar,

Thanks for this. I have a question about pager, sorry if it's clear, but to me it's not.

How can I load in views dynamically and dynamically bind viewModels to the view, and of course... how do I do the inverse which is call a special method to run any cleanup on the vm that is about to be released?

[oscar.f...@gmail.com]

The easiest way to dynamically load views and view models is to use "sourceOnShow" (see http://pagerjs.com/demo/#!/lazy_load_external_content) and "withOnShow" (see http://pagerjs.com/demo/#!/lazy_bind_view_model).

Some cleanup code can be inserted at "afterHide" (see http://pagerjs.com/demo/#!/custom_js_when_navigating).

I haven't implemented a complete life cycle system yet (destroying pages etc).

Hope this helps,

Oscar

[leslie Lau]

Looks very promising Oscar!  Does anyone know how this compares with knockout.composite?  I would love to hear some opinions as I'm looking for single-page app using knockoutjs.

Leslie

[isdon...@gmail.com]

can you tell me the best way to move pages with javascript rather than data-bind hrefs?

Is using pager.start('page') multiple times ok? or should I use showChild('page') and somehow update the hash as well?

I want to move pages after an ajax button is finished its function.

Don

have a great day

[oscar.f...@gmail.com]

I usually send the hash as an argument to the buttons click-event. That way I think the separation between the view and the view model is maximized.

E.g.

   

<form data-bind="submit: doSomething('#some/fragment/identifier')"> .... </form>

where

doSomething = function(onSuccessHash) {
    return function() {
        $.ajax({
          url: 'some/url',
          data: someData,
          success: function() {
              location.hash = onSuccessHash;
          }
        });
    };
}

Hope this helps,

Oscar

[isdon...@gmail.com]

Thanks Oscar, that makes alot of sense.

Is there a good hook to attach and detach onclick and other javascript init() functions for plugins/ DOM elements on page change, for all changed pages, rather than a afterShow:fn on each?

I was thinking a handler function that checked for visible elements, and attached on('click') handlers or initialised plugins on elements, and another handler function on page close that detached any that are live.

[melike...@gmail.com]

this reminded me of my flex days using deep linking. thanks!

[mspa...@gmail.com]

Wow Oscar this looks fantastic, and close to what I've been searching for. I almost abandoned Knockout after wiring up my educational app, only to discover that I needed yet another framework to handle changing out content and pages tied to my viewModel. I found the Sammy examples and docs to be sparse enough that I thought maybe it would be better to use something like Angular.js where everything is included, but it seems to me that the data stuff in Angular is not nearly as easy as Knockout, which left me back to square one.

 

Now with your fantastic examples I feel confident my e-learning app (not webapp....) will be all wired up shortly. I'm stripping out all Winjs dependencies to create an app that I can publish to all of the platforms, as the Win8 store is a miserable place for developers right now (ie no money to be had...). For money, one still needs to focus on IOS, Nook, and Amazon.

 

So thanks very much, this must have been  a ton of work, and I thank you for it!

 

best wishes from cold and snowy Alaska

Stacey

[ma...@strukelj.net]

I am playing with this tool for a while. This is crazy insane AWESOME!!! Where you have been until now? And documentation and demos are great!

The next great thing after jquery and knockout.js.

I will refactor my quite large hobby project. As far as I tested it, it is perfect fit.

Thank you a lot!

Best regards,

Marko Strukelj