Formatting
This commit is contained in:
parent
ef8216de60
commit
226f3e140b
|
@ -1,6 +1,6 @@
|
||||||
<div class='site-header'>
|
<div class='site-header'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
This is <a href="."><em>{{ site.meta.name }}</em></a> — collection of cheatsheets I've written.
|
This is <a href="."><em>{{ site.meta.name }}</em></a> — a collection of cheatsheets I've written.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
35
ractive.md
35
ractive.md
|
@ -34,9 +34,9 @@ vim: ft=javascript
|
||||||
sanitize: false
|
sanitize: false
|
||||||
})
|
})
|
||||||
|
|
||||||
### Instance methods
|
## Instance methods
|
||||||
|
|
||||||
Updating values:
|
### Updating values
|
||||||
|
|
||||||
view.add('count', 1) //=> promise
|
view.add('count', 1) //=> promise
|
||||||
view.subtract('count', 1) //=> promise
|
view.subtract('count', 1) //=> promise
|
||||||
|
@ -50,7 +50,7 @@ Updating values:
|
||||||
view.get('a')
|
view.get('a')
|
||||||
view.data.a
|
view.data.a
|
||||||
|
|
||||||
Nodes and components:
|
### Nodes and components
|
||||||
|
|
||||||
view.find('.klass')
|
view.find('.klass')
|
||||||
view.findAll('.klass')
|
view.findAll('.klass')
|
||||||
|
@ -60,13 +60,13 @@ Nodes and components:
|
||||||
view.findComponent('photo')
|
view.findComponent('photo')
|
||||||
view.findAllComponents('photo')
|
view.findAllComponents('photo')
|
||||||
|
|
||||||
Events:
|
### Events
|
||||||
|
|
||||||
view.on('event', function() { ... })
|
view.on('event', function() { ... })
|
||||||
view.off('event', fn)
|
view.off('event', fn)
|
||||||
view.fire('event')
|
view.fire('event')
|
||||||
|
|
||||||
Etc:
|
### Others
|
||||||
|
|
||||||
view.update()
|
view.update()
|
||||||
view.updateModel()
|
view.updateModel()
|
||||||
|
@ -78,14 +78,17 @@ Etc:
|
||||||
view.toHTML() //=> String
|
view.toHTML() //=> String
|
||||||
view.render()
|
view.render()
|
||||||
|
|
||||||
### Extend
|
## Extend
|
||||||
|
|
||||||
View = Ractive.extend({
|
View = Ractive.extend({
|
||||||
...
|
...
|
||||||
})
|
})
|
||||||
new View()
|
new View()
|
||||||
|
|
||||||
### [Components](https://github.com/RactiveJS/Ractive/wiki/Components)
|
## [Components](https://github.com/RactiveJS/Ractive/wiki/Components)
|
||||||
|
|
||||||
|
See: https://github.com/RactiveJS/Ractive/issues/74
|
||||||
|
{:.center}
|
||||||
|
|
||||||
Widget = Ractive.extend({ ... })
|
Widget = Ractive.extend({ ... })
|
||||||
|
|
||||||
|
@ -97,14 +100,12 @@ Etc:
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
See: https://github.com/RactiveJS/Ractive/issues/74
|
## Partials
|
||||||
|
|
||||||
### Partials
|
|
||||||
|
|
||||||
// Global partials
|
// Global partials
|
||||||
Ractive.partials.x = "<..>"
|
Ractive.partials.x = "<..>"
|
||||||
|
|
||||||
### Events
|
## Events
|
||||||
|
|
||||||
view.on('teardown')
|
view.on('teardown')
|
||||||
|
|
||||||
|
@ -127,7 +128,7 @@ See: https://github.com/RactiveJS/Ractive/issues/74
|
||||||
console.log("Changed name to", name);
|
console.log("Changed name to", name);
|
||||||
}, { init: false });
|
}, { init: false });
|
||||||
|
|
||||||
### Markup
|
## Markup
|
||||||
|
|
||||||
Hello, {{name}}
|
Hello, {{name}}
|
||||||
Body: {{{unescaped}}}
|
Body: {{{unescaped}}}
|
||||||
|
@ -147,7 +148,7 @@ See: https://github.com/RactiveJS/Ractive/issues/74
|
||||||
|
|
||||||
{{#statusDogs[selected]}}
|
{{#statusDogs[selected]}}
|
||||||
|
|
||||||
### Transformed attributes
|
## Transformed attributes
|
||||||
|
|
||||||
This transforms the `list` attribute via a helper function called `sort()`.
|
This transforms the `list` attribute via a helper function called `sort()`.
|
||||||
|
|
||||||
|
@ -159,7 +160,7 @@ This transforms the `list` attribute via a helper function called `sort()`.
|
||||||
sort: function(array, column) { return array.whatever(); }
|
sort: function(array, column) { return array.whatever(); }
|
||||||
}
|
}
|
||||||
|
|
||||||
### Transitions
|
## Transitions
|
||||||
|
|
||||||
<div intro="fade">
|
<div intro="fade">
|
||||||
<div intro="bump">
|
<div intro="bump">
|
||||||
|
@ -180,7 +181,7 @@ This transforms the `list` attribute via a helper function called `sort()`.
|
||||||
t.complete();
|
t.complete();
|
||||||
};
|
};
|
||||||
|
|
||||||
### [Decorators](http://docs.ractivejs.org/latest/decorators)
|
## [Decorators](http://docs.ractivejs.org/latest/decorators)
|
||||||
|
|
||||||
<span decorator="tooltip:hello there">Hover me</span>
|
<span decorator="tooltip:hello there">Hover me</span>
|
||||||
|
|
||||||
|
@ -199,7 +200,7 @@ This transforms the `list` attribute via a helper function called `sort()`.
|
||||||
|
|
||||||
tooltip: function (node, a, b, two, c) { ... }
|
tooltip: function (node, a, b, two, c) { ... }
|
||||||
|
|
||||||
### [Adaptors](http://docs.ractivejs.org/latest/adaptors)
|
## [Adaptors](http://docs.ractivejs.org/latest/adaptors)
|
||||||
|
|
||||||
myAdaptor = {
|
myAdaptor = {
|
||||||
filter: function (object, keypath, ractive) {
|
filter: function (object, keypath, ractive) {
|
||||||
|
@ -221,7 +222,7 @@ This transforms the `list` attribute via a helper function called `sort()`.
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
### [Computed properties](http://docs.ractivejs.org/latest/computed-properties)
|
## [Computed properties](http://docs.ractivejs.org/latest/computed-properties)
|
||||||
|
|
||||||
new Ractive({
|
new Ractive({
|
||||||
template: '{{area}}',
|
template: '{{area}}',
|
||||||
|
|
Loading…
Reference in New Issue