https://github.com/developit/puredom-view
A simple view-presenter base class/mixin for puredom. Works with puredom-router and puredom-viewmanager
https://github.com/developit/puredom-view
Last synced: 3 months ago
JSON representation
A simple view-presenter base class/mixin for puredom. Works with puredom-router and puredom-viewmanager
- Host: GitHub
- URL: https://github.com/developit/puredom-view
- Owner: developit
- License: gpl-3.0
- Created: 2014-11-03T00:24:13.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2017-05-09T15:19:09.000Z (over 8 years ago)
- Last Synced: 2025-09-12T00:45:40.406Z (4 months ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
puredom-view [](https://www.npmjs.org/package/puredom-view) [](http://bower.io/search/?q=puredom-view)
============
A simple view-presenter base class/mixin for puredom.
Acts as a glue between [puredom](http://puredom.org)'s [RouteManager](http://puredom.org/docs/symbols/puredom.RouteManager.html) and [ViewManager](http://puredom.org/docs/symbols/puredom.RouteManager.html).
---
Instantiation
-------------
**Using AMD:**
```JavaScript
define(['puredom-view'], function(view) {
return view({
template : 'Hello, world!'
});
});
```
**Without AMD:**
```HTML
var routes = new puredom.RouteManager();
var route = view({
url : '/hello',
template : 'Hello.'
});
routes.register('hello', route);
```
---
Usage
-----
```JavaScript
define(['puredom-view'], function(view) {
// the caller just registers this as a route/controller
return view({
// for the router:
name : 'about',
title : 'About',
customUrl : '/about',
// View template, usually obtained via a text dependency:
template : '{{#terms}}{{name}}{{/terms}}',
// Event delegation mappings
events : {
'click a.term' : 'openThing'
},
// Delegated handler, called in response to clicks on
openThing : function(e) {
window.open( e.target.href );
return e.cancel();
},
// Some default data to populate with. Real data can be passed to .populate()
data : {
terms : [
{ name:'Dinosaur', url:'http://wikipedia.org/wiki/Dinosaur' },
{ name:'Koala', url:'http://wikipedia.org/wiki/Koala' },
{ name:'Thu`um', url:'http://wikipedia.org/wiki/Skyrim' }
]
}
});
});
```