A minimalistic 2-way binding system
Twine is a minimalistic two-way binding system.
Twine is available on bower via
bower install twine if that is your preference.
Twine comes as
dist/twine.min.js in this repo and in the bower package.
Twine is also available as a gem. In your Gemfile, add
gem 'twine-rails' and include it in your
application.js manifest via
//= require twine
AMD, CommonJS and Browser global (using UMD) are also supported.
Twine can be initialized simply with the following:
context will be considered the context root, and this will work until you navigate to a new page. On a simple app, this may be all you need to do.
Turbolinks requires a bit more consideration, as the executing JS context will remain the same -- you have the same
window object throughout operation. When the page changes and new nodes come in, they need to be re-bound manually. Twine leaves this to you, rather than attempting to guess.
Here's a sample snippet that you might use:
context =documentaddEventListener 'page:change'->Twineresetcontextbindrefreshreturn
If you're using the jquery.turbolinks gem, then you can use:
context =$ ->Twineresetcontextbindrefreshreturn
With TurboGraft, you may have cases where you want to keep parts of the page around, and thus, their bindings should continue to live.
The following snippet may help:
context ==if nodesTwinebindnode for node in nodeselseTwineresetcontextbindTwinerefreshImmediatelyreturndocumentaddEventListener 'DOMContentLoaded'-> resetdocumentaddEventListener 'page:load'reseteventdatareturndocumentaddEventListener 'page:before-partial-replace'nodes = eventdataTwineunbindnode for node in nodesreturn$documentajaxComplete ->Twinerefresh
Registers a function to be called when the currently binding node and its children have finished binding.
: ->TwineafterBound ->consolelog"done"# other methods needed in the context# ...
Lets you register a function to ignore certain events in order to improve performance. If the function you set returns true, then the event processing chain will be halted
=$target = $eventtarget$targethasClass'disabled'
Lets you add constructors, modules, functions, etc to Twine that are not globally available. This means you can keep your classes etc
as local variables and Twine will find them for you within
# local_class.coffee# ...Twineregister'LocalClass'LocalClass
To get the current context in the dev console, inspect an element then type:
Where context expects a node and
$0 is shorthand for the current node in the dev console.
git clone email@example.com:Shopify/twine
npm install -g testem coffee-script
dev upto update
make .all && make .uglifyto update JS
bundle exec rake release