# knockthru

> Node.js module to allow Knockout based html UI to bind directly to server-side Mongoose (MongoDB) data models

Latest version **0.1.0** (published 2017-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install knockthru
pnpm add knockthru
yarn add knockthru
bun add knockthru
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-01-28 |
| First published | 2016-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Mike Mueller |
| Maintainers | mikenz1000 |
| Keywords | databinding, crud, rest, knockout, server, client, ui, mongoose, mongodb, express |

## Links

- npm: https://www.npmjs.com/package/knockthru
- Homepage: https://github.com/mikenz1000/knockthru#readme
- Issues: https://github.com/mikenz1000/knockthru/issues
- npm.io page: https://npm.io/package/knockthru

## Dependencies (4)

- [debug](https://npm.io/package/debug.md) ^2.1.0
- [pluralize](https://npm.io/package/pluralize.md) ^1.0.3
- [uglify-js](https://npm.io/package/uglify-js.md) ~2.4.24
- [body-parser](https://npm.io/package/body-parser.md) ^1.15.2

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-01-28
- 0.0.3 — 2016-12-22
- 0.0.2 — 2016-11-03

## README

# knockthru

Node.js module that allows you to databind the [Knockout](http://knockoutjs.com/) UI in the browser directly against the [Mongoose](https://www.npmjs.com/package/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=<some identifier> 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.

---
_Source: https://npm.io/package/knockthru · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._