pointers

Syncs a model/collection with an element. Supports two-way syncs. Respects garbage collection and bottom-up rendering. Reactive.

Pointers

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

Node, Browserify

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

Ender

  • Use: require('pointers')
  • Install: ender add pointers
# 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(Routeargs)
 
# 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 
        @

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

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

These amazing people are maintaining this project:

  • Benjamin Lupton b@lupton.cc (https://github.com/balupton)

No sponsors yet! Will you be the first?

These amazing people have contributed code to this project:

Become a contributor!

Licensed under the incredibly permissive MIT license

Copyright © 2013+ Bevry Pty Ltd us@bevry.me (http://bevry.me)