knockthru

Node.js module that allows you to databind the Knockout UI in the browser directly against the Mongoose datamodel without having to write glue code.

The data is served up to SCRUD endpoints automatically created by the embedded meanify implementation. The knockthru.js file you include in the browser code looks for data-knockthru attributes on elements and creates/binds viewmodels using Knockout accordingly.

Complete Examples

This is the best way to see knockthru in action and to understand how it works.

After running npm update change to the example folder and run node server

The port on which the example is being served will be written to the console, typically http://localhost:3000

You'll need to have mongoose db running locally on port 27017

Snippets

To list the Tasks in the server-side mongoose database that have done set to 0

	<div data-knockthru='kt.search("Task",{done:0})'>
		<p data-bind='foreach: items'>
		...
		</p>
	</div>

To provide a box for the user to define a new Task

    <tfoot data-knockthru='kt.create("Task")' data-bind='with: item'>
        <tr>
            <td><input type="text" data-bind='textInput: description, onEnterKey: (description ? $parent.submitCreate : null)' ></td>
            <td><button data-bind='enable: description, click:$parent.submitCreate'>Add</input></td>
        </tr>            
    </tfoot>  

To display a specific task identified by ?id= on the querystring and allow the user to edit it

	<div data-knockthru='kt.read("Task",kt.getUrlParameter("id"))'>
		<div data-bind='with: item' >
            ...    
                <input type="text" data-bind='textInput: description'>
            ...
                <input type='checkbox' data-bind='checked: done' id="doneInput">Done</input>
            ...
        </div>
        <button data-bind='enable: item.isDirty(), click:submitUpdate'>Save</button>
        <button data-bind='click: submitDelete'>Delete</button>
	</div>

To run knockthru with server-side filters/predicates that will allow you to ensure url re-writers can't access data they shouldn't be able to, e.g. to ensure all data requests have a filter on a field called user that has a value of req.user.id (if you are using passport, for example)

require('knockthru')(app,
{
    predicates: function(req, model) { return {user:req.user.id} }
});

ViewModel Functions

These methods can be used in the data-knockthru attributes

kt.search(modelname[, filters])

Generates a viewmodel the can display a readonly list of items

element	description
items	an observable array of the result of the search
createItem	an observable 'blank' you can bind to for create functionality (see create)
errors	an observable list of strings detailing any errors / validation errors from the server
refresh	event handler to re-run the query

kt.searchEdit(modelname[, filters])

Generates a viewmodel for an editable list of items

element	description
items	an observable array of the result of the search
items[].delete	handler to delete an item
createItem	an observable 'blank' you can bind to for create functionality (see create)
errors	an observable list of strings detailing any errors / validation errors from the server
isDirty	observable boolean indicating whether changes have been made
submit	event handler to save all the changes made
refresh	event handler to re-run the query

Note on delete: use within the context of one of the items array e.g. data-bind='click:$parent.delete'

    <tbody data-knockthru='kt.searchEdit("Task")' data-bind='foreach: items'>
        <tr>
        ...
            <td><button class='form-control btn-xs'><span class='glyphicon glyphicon-remove' data-bind='click:$parent.delete'></button></td>
        </tr>
    </tbody>

kt.create(modelname[, predicates])

Generates a viewmodel for creating a new item. The default values of the fields are obtained from the server.

element	description
blank	an observable blank item with fields populated with default values from the server
error	an observable string detailing any errors / validation errors from the server
submitCreate	event handler to write the new item to the server
addToSearch	event handler to add the item to a search/searchEdit viewmodel on the page. Pass the html element that has the data-knockthru attribute (e.g. document.getElementById('...'))

kt.read(modelname, id)

Generates a viewmodel for binding to a specific item in the database, identified by the id

element	description
item	an observable item representing the object read from the server
error	an observable string detailing any errors / validation errors from the server
refresh	event handler to re-run the query
submitUpdate	event handler to write the new item to the server
submitDelete	event handler to write the new item to the server

For the id parameter you typically could use either kt.getUrlParameter('_id') or kt.getUrlPathTail() to grab the id from the url.