# puredom-view

**Repository Path**: mirrors_developit/puredom-view

## Basic Information

- **Project Name**: puredom-view
- **Description**: A simple view-presenter base class/mixin for puredom. Works with puredom-router and puredom-viewmanager
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

puredom-view [![NPM Version](https://img.shields.io/npm/v/puredom-view.svg?style=flat)](https://www.npmjs.org/package/puredom-view) [![Bower Version](https://img.shields.io/bower/v/puredom-view.svg?style=flat)](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
<script src="puredom-rest.js"></script>
<script>
	var routes = new puredom.RouteManager();

	var route = view({
		url : '/hello',
		template : 'Hello.'
	});

	routes.register('hello', route);
</script>
```


---


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}}<a class="term" href="{{url}}">{{name}}</a>{{/terms}}',

		// Event delegation mappings
		events : {
			'click a.term' : 'openThing'
		},

		// Delegated handler, called in response to clicks on <a class="term">
		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' }
			]
		}

	});

});
```