- commit
- a2d28012422c456f03cba679975d2e3138bbc5d8
- parent
- a79f07f5b298c38a8cab30eff7642e87989aa29e
- Author
- Tobias Bengfort <tobias.bengfort@gmx.net>
- Date
- 2015-09-09 07:21
update docs
Diffstat
| M | .doc/tutorials/phonecat.md | 19 | +++++++++---------- |
| M | examples/example/example.js | 10 | +++++----- |
| M | examples/phonecat/phonecat.js | 6 | +++--- |
| M | src/muu-directive.js | 4 | ++-- |
4 files changed, 19 insertions, 20 deletions
diff --git a/.doc/tutorials/phonecat.md b/.doc/tutorials/phonecat.md
@@ -61,7 +61,7 @@ We can start off with this simple template: 61 61 {"age": 3, "name": "Nexus S", "snippet": "Fast just got faster with ..."} 62 62 ]; 63 6364 -1 registry.registerDirective('phonecat', template, function(self, element) {-1 64 registry.registerDirective('phonecat', template, function(self) { 65 65 self.update({ 66 66 phones: phones 67 67 }); @@ -81,11 +81,10 @@ create a button like this: 81 81 <a href="#" class="button" data-onclick="reverse"></a> 82 82 83 83 Any `click` event that is now triggered on this element will be forwarded to84 -1 the *directive element* as a `muu-reverse` event. So in your link function you85 -1 can do something like this:-1 84 the directive. So in your link function you can do something like this: 86 8587 -1 registry.registerDirective('phonecat', template, function(self, element) {88 -1 element.addEventListener('muu-reverse', function() {-1 86 registry.registerDirective('phonecat', template, function(self) { -1 87 self.on('reverse', function() { 89 88 self.update({ 90 89 phones: phones.reverse() 91 90 }); @@ -107,8 +106,8 @@ form inputs. So lets first add a search input to the template: 107 106 Next, we can register a handler for the new `muu-filter` event in the link 108 107 function: 109 108110 -1 registry.registerDirective('phonecat', template, function(self, element) {111 -1 element.addEventListener('muu-filter', function() {-1 109 registry.registerDirective('phonecat', template, function(self) { -1 110 self.on('filter', function() { 112 111 var query = self.getModel('query', ''); 113 112 self.update({ 114 113 phones: phones.filter(function(phone) { @@ -139,8 +138,8 @@ own directive. 139 138 '{{/phones}}' + 140 139 '</ul>' + 141 140 '<input type="search" name="query" data-onsearch="filter" />';142 -1 registry.registerDirective('phonecat', listTemplate, function(self, element) {143 -1 element.addEventListener('muu-filter', function() {-1 141 registry.registerDirective('phonecat', listTemplate, function(self) { -1 142 self.on('filter', function() { 144 143 var query = self.getModel('query', ''); 145 144 self.update({ 146 145 phones: phones.filter(function(phone) { @@ -185,7 +184,7 @@ to the directive. This can easily be done by returning a *unlink* function from 185 184 your link function: 186 185 187 186 var template = 'This is a great joke {{#showit}}NOT{{/showit}}';188 -1 registry.registerDirective('joke', template, function(self, element) {-1 187 registry.registerDirective('joke', template, function(self) { 189 188 var timeoutID = setTimeout(function() { 190 189 self.update({ 191 190 showit: true
diff --git a/examples/example/example.js b/examples/example/example.js
@@ -16,14 +16,14 @@ require(['xhr', 'muu', 'muu-moment'], function(xhr, muu, muuMoment) {
16 16 'test',
17 17 '<ul>{{#elements}}<li>{{name}}</li><muu type="moment"></muu>{{/elements}}</ul>' +
18 18 '<input name="input" data-onkeydown="push" />',
19 -1 function(self, element) {
-1 19 function(self) {
20 20 var data = {
21 21 elements: [{
22 22 name: 'hugo'
23 23 }]
24 24 };
25 25
26 -1 element.addEventListener('muu-push', function(event) {
-1 26 self.on('push', function(event) {
27 27 if (event.detail.keyCode === 13) {
28 28 data.elements.push({
29 29 name: self.getModel('input') || ''
@@ -31,7 +31,7 @@ require(['xhr', 'muu', 'muu-moment'], function(xhr, muu, muuMoment) {
31 31 self.update(data);
32 32 self.setModel('input', '');
33 33 }
34 -1 }, false);
-1 34 });
35 35
36 36 self.update(data);
37 37 })
@@ -43,13 +43,13 @@ require(['xhr', 'muu', 'muu-moment'], function(xhr, muu, muuMoment) {
43 43 name: element.getAttribute('data-name')
44 44 };
45 45
46 -1 element.addEventListener('muu-update', function(event) {
-1 46 self.on('update', function(event) {
47 47 if (event.detail.keyCode === 13) {
48 48 var input = self.getModel('input');
49 49 data.result = eval(input);
50 50 self.update(data);
51 51 }
52 -1 }, false);
-1 52 });
53 53
54 54 self.update(data);
55 55 });
diff --git a/examples/phonecat/phonecat.js b/examples/phonecat/phonecat.js
@@ -16,8 +16,8 @@ require(['xhr', 'muu'], function(xhr, muu) {
16 16 var phones = args[1];
17 17
18 18 var registry = new muu.Registry()
19 -1 .registerDirective('phonecat', template, function(self, element) {
20 -1 element.addEventListener('muu-filter', function() {
-1 19 .registerDirective('phonecat', template, function(self) {
-1 20 self.on('filter', function() {
21 21 var query = self.getModel('query', '').toLowerCase();
22 22 var orderProp = self.getModel('orderProp');
23 23
@@ -30,7 +30,7 @@ require(['xhr', 'muu'], function(xhr, muu) {
30 30 return a[orderProp] > b[orderProp];
31 31 })
32 32 });
33 -1 }, false);
-1 33 });
34 34
35 35 self.update({phones: phones});
36 36 self.setModel('query', '');
diff --git a/src/muu-directive.js b/src/muu-directive.js
@@ -22,8 +22,8 @@ define('muu-directive', ['muu-dom-helpers', 'muu-js-helpers', 'muu-update-dom'],
22 22 * - You can react to DOM events by specifying an alias for them. In the
23 23 * template, you might for example add the attribute
24 24 * `data-onclick="custom"` to an element. When there is `click` event on
25 -1 * that element, a `muu-custom` event will be triggered on the
26 -1 * directive's root element.
-1 25 * that element, a `custom` event will be triggered on the directive. See
-1 26 * {@link Directive#on}.
27 27 *
28 28 * Directives are typically not created directly but via {@link
29 29 * Registry#link}.