Pointers NPM | npm.io

Pointers

Point a model or collection to a view. Respects garbage collection and bottom-up rendering. Reactive.

Install

Node, Browserify

Use: require('pointers')
Install: npm install --save pointers

Ender

Use: require('pointers')
Install: ender add pointers

Usage

# Import
{Pointer} = require('pointers')
MiniView = require('miniview').View

# Extend MiniView
class View extends MiniView
	point: (args...) ->
		pointer = new Pointer(args...)
		(@pointers ?= []).push(pointer)
		return pointer

	destroy: ->
		pointer.destroy()  for pointer in @pointers  if @pointers
		@pointers = null
		return super

	navigate: (args...) ->
		return Route.navigate.apply(Route, args)

# List Item View
class ListItemView
	el: """
		<li class="list-item-view">
			<span class="field-title"></span>
			<span class="field-date"></span>
		</li>
		"""

	elements:
		'.field-title': '$title'
		'.field-date': '$date'

	render: ->
		# Bind the model's title (fallback to name) attribute, to the $title element
		@point(@item).attributes('title', 'name').to(@$title).bind()

		# Bind the model's date attribute, to the $date element, with a custom setter
		@point(@item).attributes('title', 'name').to(@$title)
			.using ($el, model, value) ->
				$el.text value?.toLocaleDateString()
			.bind()

		# Chain
		@

# List View
class ListView
	el: """
		<div class="list-view">
			<ul class="items"></ul>
		</div>
		"""

	elements:
		'ul.items': '$items'

	render: ->
		# Bind the collection, using the ListItemView, to the $items element
		@point(@item).view(ListItemView).to(@$items).bind()

		# Chain
		@

# Edit View
class EditView
	el: """
		<li class="edit-view">
			<input type="text" class="field-title"></input>
		</li>
		"""

	elements:
		'.field-title :input': '$title'

	render: ->
		# Bind the model's title (fallback to name) attribute to the $title element, with a two way-sync
		@point(@item).attributes('title', 'name').to(@$title).update().bind()

		# Chain
		@