Skip to content

Datasource Components for KnockoutJs for paging, sorting and filtering remote sources.

Notifications You must be signed in to change notification settings

CraigCav/ko.datasource

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

ko.datasource

Datasource Components for KnockoutJs for paging, sorting and filtering remote sources.

##Getting started

  1. Include knockout and ko.datasource on your page.

    <script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
    <script src="https://raw.github.com/CraigCav/ko.datasource/master/ko.datasource.js"></script>
  2. Specify your markup as if you were binding to a standard observable or observableArray.

    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Sales</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr>
                <td data-bind="text: id"></td>
                <td data-bind="text: name"></td>
                <td data-bind="text: sales"></td>
                <td data-bind="text: price"></td>
            </tr>
        </tbody>            
    </table>

2b. Optionally specify a pager if desired.

```html
<span id="pager">
    <button data-bind="click: items.pager.first">First</button>
    <button data-bind="click: items.pager.previous">Prev</button>
    <span class="summary">Page 
        <span data-bind="text: items.pager.page"></span> of 
        <span data-bind="text: items.pager.totalPages"></span></span>
    <button data-bind="click: items.pager.next">Next</button>
    <button data-bind="click: items.pager.last">Last</button>
</span>
```
  1. Extend an observable or observableArray with the datasource. The single parameter is a function that provides your data. Optionally include the pager extender to add paging support.

    var viewModel = {
        items: ko.observableArray([]).extend({
            datasource: getAnimals, //getAnimals is a data service to populate the viewmodel
            pager: {
                limit: 3
            }
        })
    };
  2. Apply Bindings

    ko.applyBindings(viewModel);
  3. Enjoy!

##Live Sample

Sample usage: http://jsfiddle.net/craigcav/UzUBm/

##More Info:

http://craigcav.wordpress.com/2012/05/21/ko-datasourceenable-simple-binding-to-remote-data-sources/

##Kudos

None of this would've been possible without the inspiring work Ryan Niemeyer put into documenting KnockoutJS. In particular without the following two posts, this plugin wouldn't exist.

http://www.knockmeout.net/2011/04/pausing-notifications-in-knockoutjs.html http://www.knockmeout.net/2011/06/lazy-loading-observable-in-knockoutjs.html

##License

MIT license - http://www.opensource.org/licenses/mit-license.php

About

Datasource Components for KnockoutJs for paging, sorting and filtering remote sources.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published