# frameworkless-view-templeton

> A View-Presenter implementation for Frameworkless, using templeton.

Latest version **1.3.2** (published 2015-11-03) · BSD license · 0 weekly downloads

## Install

```sh
npm install frameworkless-view-templeton
pnpm add frameworkless-view-templeton
yarn add frameworkless-view-templeton
bun add frameworkless-view-templeton
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2015-11-03 |
| First published | 2015-05-07 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | developit |

## Links

- npm: https://www.npmjs.com/package/frameworkless-view-templeton
- Repository: https://github.com/developit/frameworkless-view-templeton
- Homepage: https://github.com/developit/frameworkless-view-templeton#readme
- Issues: https://github.com/developit/frameworkless-view-templeton/issues
- npm.io page: https://npm.io/package/frameworkless-view-templeton

## Dependencies (1)

- [templeton](https://npm.io/package/templeton.md) ^2.1.1

## Recent versions

- 1.3.2 (latest) — 2015-11-03
- 1.3.1 — 2015-06-27
- 1.3.0 — 2015-06-27
- 1.2.0 — 2015-05-07

## README

frameworkless-view-templeton [![NPM Version](http://img.shields.io/npm/v/frameworkless-view-templeton.svg?style=flat)](https://www.npmjs.org/package/frameworkless-view-templeton) [![Bower Version](http://img.shields.io/bower/v/frameworkless-view-templeton.svg?style=flat)](http://bower.io/search/?q=frameworkless-view-templeton)
=============

A simple view-presenter module for [frameworkless](https://github.com/synacorinc/frameworkless), using [Templeton](https://github.com/developit/templeton).

**[View Demo](http://frameworkless-view-templeton.herokuapp.com/demo/)**

[![Build Status](https://img.shields.io/travis/developit/frameworkless-view-templeton.svg?style=flat&branch=master)](https://travis-ci.org/developit/frameworkless-view-templeton)
[![Dependency Status](http://img.shields.io/david/developit/frameworkless-view-templeton.svg?style=flat)](https://david-dm.org/developit/frameworkless-view-templeton)
[![devDependency Status](http://img.shields.io/david/dev/developit/frameworkless-view-templeton.svg?style=flat)](https://david-dm.org/developit/frameworkless-view-templeton#info=devDependencies)

[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)


---


Features
--------

- Built-in declarative event delegation
- Uses [Templeton](http://github.com/developit/templeton) to render HTML view templates


---


Installation
============


Use a Package Manager
---------------------
**bower:**

```bash
bower install frameworkless-view-templeton
# copy the stuff you want
cp bower_components/frameworkless-view-templeton/dist/view.js src/lib
```

**npm:**

```bash
npm install frameworkless-view-templeton
# copy the stuff you want
cp node_modules/frameworkless-view-templeton/dist/view.js src/lib
```


Use the Source
--------------

Get started right away, so you can disassemble and play around at your lesure.

```bash
# Clone frameworkless-view-templeton
git clone git@github.com:developit/frameworkless-view-templeton.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
-----------

```JavaScript
require(['view'], function(view) {

	// We're using Templeton/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
---------------

```JavaScript
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
------------------

```JavaScript
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
---------------

* `/src` is where the source code lives
* `/dist` is the built library
* `/demo` is a simple demo, using [requirejs](http://requirejs.org)



---


License
-------

BSD

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