ractive.md

   1 ---
   2 title: Ractive.js
   3 category: JavaScript libraries
   4 vim: ft=javascript
   5 ---
   6
   7 {% raw %}
   8 ### [Initialization](http://docs.ractivejs.org/latest/options)
   9
  10     new Ractive({
  11       el: $('..'),
  12       el: '#box',
  13       template: '...', // required
  14
  15       // callbacks
  16       init: function() {},    // on instantiate
  17       complete: function() {}, // on finish animations
  18
  19       // objs
  20       data: { ... },
  21       partials: { ... },    // global: Ractive.partials
  22       transitions: { ... }, // global: Ractive.transitions
  23       components: { ... },
  24       adaptors: [ ... ],
  25
  26       // options
  27       magic: false
  28       modifyArrays: true
  29       twoway: true
  30       noIntro: true // true = disable transition on initial render
  31       lazy: false   // false = use keyevents, true = use change/blur
  32       append: false // false = overwrite element, true = append
  33       debug: false
  34       sanitize: false
  35     })
  36
  37 ## Instance methods
  38
  39 ### Updating values
  40
  41     view.add('count', 1)       //=> promise
  42     view.subtract('count', 1)  //=> promise
  43     view.toggle('shown')       //=> promise
  44
  45     view.set('a', true)
  46     view.set({ a: true })
  47     view.reset({ a: true })
  48     view.merge('list', [a,b,c])
  49
  50     view.get('a')
  51     view.data.a
  52
  53 ### Nodes and components
  54
  55     view.find('.klass')
  56     view.findAll('.klass')
  57     view.nodes
  58     view.nodes['hello']   // .find('#hello')
  59
  60     view.findComponent('photo')
  61     view.findAllComponents('photo')
  62
  63 ### Events
  64
  65     view.on('event', function() { ... })
  66     view.off('event', fn)
  67     view.fire('event')
  68
  69 ### Others
  70
  71     view.update()
  72     view.updateModel()
  73
  74     view.insert('.node .path')
  75
  76     view.observe({ 'name': function() { ... } })
  77
  78     view.toHTML()  //=> String
  79     view.render()
  80
  81 ## Extend
  82
  83     View = Ractive.extend({
  84       ...
  85     })
  86     new View()
  87
  88 ## [Components](https://github.com/RactiveJS/Ractive/wiki/Components)
  89
  90 See: https://github.com/RactiveJS/Ractive/issues/74
  91 {:.center}
  92
  93     Widget = Ractive.extend({ ... })
  94
  95     ractive = new Ractive({
  96       el: 'main',
  97       template: '<widget foo="bar"/>',
  98       components: {
  99         widget: Widget
 100       }
 101     });
 102
 103 ## Partials
 104
 105     // Global partials
 106     Ractive.partials.x = "<..>"
 107
 108 ## Events
 109
 110     view.on('teardown')
 111
 112 ### DOM Events
 113
 114     <button on-click='activate'>Activate!</button>
 115
 116     view.on({
 117       activate: function () { ... }
 118     });
 119
 120     <button on-click='sort:name'>Sort by name</button>
 121     view.on('sort', function (e, column) {
 122       console.log('sorting by #{column}');
 123     });
 124
 125 ### Observing
 126
 127      view.observe("name", function (name) {
 128        console.log("Changed name to", name);
 129      }, { init: false });
 130
 131 ## Markup
 132
 133     Hello, {{name}}
 134     Body: {{{unescaped}}}
 135
 136     <!-- each -->
 137     {{#mylist:i}}
 138       <li>{{this.name}}</li>
 139       <li>{{name}}</li>
 140       <li>{{.}}</li> <!-- same as 'this' -->
 141     {{/mylist}}
 142
 143     {{^user}}Not logged in{{/user}} <!-- if false -->
 144     {{#user}}Welcome, sire{{/user}} <!-- if true -->
 145
 146     {{>partialName}}
 147     <component>
 148
 149     {{#statusDogs[selected]}}
 150
 151 ## Transformed attributes
 152
 153 This transforms the `list` attribute via a helper function called `sort()`.
 154
 155     {{# sort(list, "name") :num }}
 156       <li>{{num}} - {{name}}</li>
 157     {{/ end. any text goes here }}
 158
 159     data: {
 160       sort: function(array, column) { return array.whatever(); }
 161     }
 162
 163 ## Transitions
 164
 165     <div intro="fade">
 166     <div intro="bump">
 167     <div intro="bump:{duration:400}">
 168
 169     Ractive.transitions.bump = function(t, params) {
 170        params = t.processParams( params, {
 171          duration: 400,
 172          color: t.isIntro ? 'rgb(0,255,0)' : 'rgb(255,0,0)'
 173        });
 174
 175       if (t.isIntro) {
 176         /* enter */
 177       } else {
 178         /* exit */
 179       }
 180
 181       t.complete();
 182     };
 183
 184 ## [Decorators](http://docs.ractivejs.org/latest/decorators)
 185
 186     <span decorator="tooltip:hello there">Hover me</span>
 187
 188     decorators: {
 189       tooltip: function (node, content) {
 190         // setup code here
 191         return {
 192           teardown: function () {
 193             // cleanup code here
 194           }
 195         }
 196       }
 197     }
 198
 199     <span decorator="tooltip:'a','b',2,'c'">Hover me</span>
 200
 201     tooltip: function (node, a, b, two, c) { ... }
 202
 203 ## [Adaptors](http://docs.ractivejs.org/latest/adaptors)
 204
 205     myAdaptor = {
 206       filter: function (object, keypath, ractive) {
 207         // return `true` if a particular object is of the type we want to adapt
 208       },
 209       wrap: function (ractive, object, keypath, prefixer) {
 210         // set up event bindings here
 211         object.on('change', function () { ractive.set(prefixer({...})); });
 212         // then return a wrapper:
 213         return {
 214           teardown: function () { .. },
 215           // json representation
 216           get: function () { return { a:2, b:3, c:4, ... }; },
 217           // called on ractive.set
 218           set: function (key, val) { },
 219           // called on ractive.set on root (return false = die)
 220           reset: function (data) { return false; }
 221         };
 222       }
 223     };
 224
 225 ## [Computed properties](http://docs.ractivejs.org/latest/computed-properties)
 226
 227     new Ractive({
 228       template: '{{area}}',
 229       computed: {
 230         area: function () { return this.get('width') * this.get('height'); }
 231         area: '${width} * ${height}'
 232         fullname: {
 233           get: '${first} + " " + ${last}"
 234           set: function (name) { ... }
 235         }
 236       }
 237     });
 238
 239 {% endraw %}