node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



invoke constructors at attributes to provide controller scopes for attractor


var observe = require('observable');
var attractor = require('attractor');
var scope = { Robot: Robot };
function Robot (elem) {
    this.counter = observe(0);
} = function () {
    this.counter(this.counter() + 1);
var attr = attractor({
    'x-scope': require('attr-scope'),
    'x-bind': require('attr-bind'),
    'x-click': [ require('attr-ev'), 'click' ]
}, scope);

then write some html:

    <div x-scope="robot">
      BEEPY [<span x-bind="counter"></span>]
      <button x-click="vote">vote</button>
    <div x-scope="robot">
      BOOPS [<span x-bind="counter"></span>]
      <button x-click="vote">vote</button>
    <script src="bundle.js"></script> 


var xscope = require('attr-scope')

This module is meant to be used with attractor, but you can use the module directly too.

var handle = xscope(cb)

Create a new handle(elem, rootkey) that you can call to perform lookups.

When a value is found, cb(value, rootkey) fires with the resolved value.{ _selectors: {}, scope: {} }, elem, rootkey)

Call the handle in the context of a scope property to use for variable lookups. The attribute name keys of the _selectors object will be looked up in the html element elem and the lookup strings will be rewritten to use a generated _scope parameter to hold the instantiated references in scope at rootkey.

If the value at rootkey is a function, it will be instantiated with new node(elem, this) for the supplied element elem and the context this.


With npm do:

npm install attr-scope