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
		@

History

Discover the change history by heading on over to the History.md file.

Contribute

Discover how you can contribute by heading on over to the Contributing.md file.

Backers

Maintainers

These amazing people are maintaining this project:

• Benjamin Lupton [email protected] (https://github.com/balupton)

Sponsors

No sponsors yet! Will you be the first?

Contributors

These amazing people have contributed code to this project:

• Benjamin Lupton [email protected] (https://github.com/balupton) - view contributions

Become a contributor!

License

Licensed under the incredibly permissive MIT license

Copyright © 2013+ Bevry Pty Ltd [email protected] (http://bevry.me)