Frameworkless View 
A simple view-presenter module for frameworkless.
Features
- Built-in declarative event delegation
- Uses Handlebars to render HTML view templates
Installation
Use a Package Manager
bower:
bower install frameworkless-view# copy the stuff you want cp bower_components/frameworkless-view/dist/view.js src/libnpm:
npm install frameworkless-view# copy the stuff you want cp node_modules/frameworkless-view/dist/view.js src/libUse the Source
Get started right away, so you can disassemble and play around at your lesure.
# Clone frameworkless-view git clone git@github.com:synacorinc/frameworkless-view.git # Install development dependencies npm install # Build the library npm run-script build # or just `grunt` if you have grunt-cli installed globally # Check out the demo PORT=8080 npm start # this just does `node server.js` Basic Usage
require(['view'], function(view) { // We're using Handlebars templates: var template = '<h1>{{{title}}}</h1> <button id="hi">Click Me</button>'; // Instantiate a view: var page = view( template ); // Wire up some events: page.hookEvents({ 'click button#hi' : function() { alert( 'Title: ' + page.$$('h1').textContent ); } }); // Insert the view into the DOM: page.insertInto( document.body ); });Concise Example
var view = require('view'); var list = view({ template : '<ul> {{#items}}<li>{{.}}</li>{{/items}} </ul>', events : { 'click li' : 'clickItem' }, // a delegated event handler clickItem : function(e) { console.log(e.delegationTarget.getAttribute('title')); }}; // insert into a parent node:list.insertInto(document.body); // template some data:list.render({ items : [ 'Peach', 'Mango', 'Orange' ]});Integrated Example
define([ 'view', 'text!templates/index.html' // just an HTML file], function(view, template) { var page = { events : { 'click #submit' : 'submit', 'mouseover .tip' : 'showTip' }, submit : function() { this.view.$$('form').subimt(); }, showTip : function(e) { var tip = this.view.$$('#tip'); tip.textContent = e.delegationTarget.getAttribute('title'); tip.style.display = ''; }, load : function(params, router) { if (!this.view) { // initialize a view: this.view = view(template); // wire up event handlers: this.view.hookEvents(this.events, this); } // Template some data into the view: this.view.template({ title : 'Test Title', params : params }); // insert view into DOM: this.view.insertInto(document.body); }, unload : function() { // remove view from DOM: this.view.remove(); } }; return page;});Quick Repo Tour
/srcis where the source code lives/distis the built library/demois a simple demo, using requirejs
License
BSD