ractive.md

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