- commit
- 695a69ce4ef982cf1ec819451bb566198379ba82
- parent
- 4fa1b7e67d73ae228eb925b7ea91ca1852353144
- Author
- Tobias Bengfort <tobias.bengfort@gmx.net>
- Date
- 2015-09-09 07:22
Merge branch 'feature-directive-on'
Diffstat
| M | .doc/tutorials/phonecat.md | 19 | +++++++++---------- |
| M | examples/example/example.js | 10 | +++++----- |
| M | examples/phonecat/phonecat.js | 6 | +++--- |
| M | src/muu-directive.js | 15 | +++++++++++++-- |
| M | test/test-directive.js | 67 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
5 files changed, 97 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}.
@@ -121,6 +121,17 @@ define('muu-directive', ['muu-dom-helpers', 'muu-js-helpers', 'muu-update-dom'],
121 121 };
122 122
123 123 /**
-1 124 * @param {string} eventName
-1 125 * @param {Function} callback
-1 126 * @return {function()} An unregister function
-1 127 */
-1 128 this.on = function(eventName, fn) {
-1 129 return $.on(root, 'muu-' + eventName, function(event) {
-1 130 return fn(event.detail);
-1 131 });
-1 132 };
-1 133
-1 134 /**
124 135 * Get all model data as a flat object.
125 136 *
126 137 * @return {Object.<string, string|number|boolean>}
diff --git a/test/test-directive.js b/test/test-directive.js
@@ -124,6 +124,73 @@ define(['muu-directive', 'muu-js-helpers', 'muu-dom-helpers'], function(Directiv 124 124 }); 125 125 }); 126 126 -1 127 describe('on', function() { -1 128 var directive; -1 129 var button; -1 130 -1 131 beforeEach(function() { -1 132 var element = document.createElement('div'); -1 133 var template = '<a class="button" data-onclick="test"></a>'; -1 134 directive = new Directive(element, template, registry); -1 135 directive.update({}); -1 136 button = element.querySelector('.button'); -1 137 }); -1 138 -1 139 it('registers an event listener for an event alias', function() { -1 140 var spy = sinon.spy(); -1 141 directive.on('test', spy); -1 142 -1 143 expect(spy.callCount).to.equal(0); -1 144 button.dispatchEvent($.createEvent('click')); -1 145 expect(spy.callCount).to.equal(1); -1 146 button.dispatchEvent($.createEvent('click')); -1 147 expect(spy.callCount).to.equal(2); -1 148 button.dispatchEvent($.createEvent('click')); -1 149 expect(spy.callCount).to.equal(3); -1 150 }); -1 151 it('calls callback with original event', function() { -1 152 var spy = sinon.spy(); -1 153 directive.on('test', spy); -1 154 -1 155 button.dispatchEvent($.createEvent('click', undefined, undefined, 'asd')); -1 156 expect(spy.firstCall.args[0].detail).to.equal('asd'); -1 157 }); -1 158 it('can register more than one event listener', function() { -1 159 var spy1 = sinon.spy(); -1 160 directive.on('test', spy1); -1 161 -1 162 expect(spy1.callCount).to.equal(0); -1 163 button.dispatchEvent($.createEvent('click')); -1 164 expect(spy1.callCount).to.equal(1); -1 165 -1 166 var spy2 = sinon.spy(); -1 167 directive.on('test', spy2); -1 168 -1 169 expect(spy2.callCount).to.equal(0); -1 170 button.dispatchEvent($.createEvent('click')); -1 171 expect(spy1.callCount).to.equal(2); -1 172 expect(spy2.callCount).to.equal(1); -1 173 button.dispatchEvent($.createEvent('click')); -1 174 expect(spy1.callCount).to.equal(3); -1 175 expect(spy2.callCount).to.equal(2); -1 176 }); -1 177 it('returns an unregister function', function() { -1 178 var spy = sinon.spy(); -1 179 var unregister = directive.on('test', spy); -1 180 -1 181 expect(spy.callCount).to.equal(0); -1 182 button.dispatchEvent($.createEvent('click')); -1 183 expect(spy.callCount).to.equal(1); -1 184 -1 185 unregister(); -1 186 -1 187 button.dispatchEvent($.createEvent('click')); -1 188 expect(spy.callCount).to.equal(1); -1 189 button.dispatchEvent($.createEvent('click')); -1 190 expect(spy.callCount).to.equal(1); -1 191 }); -1 192 }); -1 193 127 194 describe('getModel', function() { 128 195 var directive; 129 196