- commit
- 5d8686dde9ba909d74df24e507376d10f607935f
- parent
- d3527e77f3e0d16ba7fa27da0fe63712f2528f4a
- Author
- Tobias Bengfort <tobias.bengfort@gmx.net>
- Date
- 2015-09-08 17:54
change updateDOM interface
Diffstat
| M | src/muu-directive.js | 5 | +---- |
| M | src/muu-update-dom.js | 13 | +++++++++---- |
| M | test/test-update-dom.js | 47 | +++++++++++++++-------------------------------- |
3 files changed, 25 insertions, 40 deletions
diff --git a/src/muu-directive.js b/src/muu-directive.js
@@ -57,10 +57,7 @@ define('muu-directive', ['muu-dom-helpers', 'muu-js-helpers', 'muu-update-dom'],
57 57 * @see The templating system can be defined in the {@link Registry}.
58 58 */
59 59 this.update = function(data) {
60 -1 var tmp = document.createElement('div');
61 -1 tmp.innerHTML = registry.renderer(template, data);
62 -1
63 -1 updateDOM(root, tmp);
-1 60 updateDOM(root, registry.renderer(template, data));
64 61
65 62 _.forEach(['keydown', 'keyup', 'click', 'change', 'search'], function(eventType) {
66 63 var selector = '[data-on' + eventType + ']';
diff --git a/src/muu-update-dom.js b/src/muu-update-dom.js
@@ -1,5 +1,5 @@ 1 1 /**2 -1 * Recreate children of `source` in `target` by making only small adjustments.-1 2 * Recreate `html` in `target` by making only small adjustments. 3 3 * 4 4 * *The following section explains details about the current implementation. 5 5 * These are likely to change in the future.* @@ -20,8 +20,8 @@ 20 20 * All classes prefixed with `muu-` will be preserved. 21 21 * 22 22 * @module muu-update-dom23 -1 * @param {Element} target24 -1 * @param {Element} source-1 23 * @param {Node} target -1 24 * @param {string} html 25 25 */ 26 26 define('muu-update-dom', ['muu-js-helpers'], function(_) { 27 27 "use strict"; @@ -84,5 +84,10 @@ define('muu-update-dom', ['muu-js-helpers'], function(_) { 84 84 } 85 85 }; 86 8687 -1 return updateDOM;-1 87 return function(target, html) { -1 88 var tmp = document.createElement('div'); -1 89 tmp.innerHTML = html; -1 90 -1 91 updateDOM(target, tmp); -1 92 } 88 93 });
diff --git a/test/test-update-dom.js b/test/test-update-dom.js
@@ -11,104 +11,87 @@ define(['muu-update-dom'], function(updateDOM) {
11 11
12 12 describe('muuUpdateDom', function() {
13 13 var target;
14 -1 var source;
15 14
16 15 beforeEach(function() {
17 16 target = document.createElement('div');
18 -1 source = document.createElement('div');
19 17 });
20 18
21 19 it('adds new text nodes', function() {
22 -1 source.innerHTML = 'Hallo';
23 -1 updateDOM(target, source);
-1 20 updateDOM(target, 'Hallo');
24 21 expect(target.innerHTML).to.equal('Hallo');
25 22 });
26 23 it('adds new elements', function() {
27 -1 source.innerHTML = '<span>hallo</span> <span>world</span>';
28 24 target.innerHTML = '<span>hallo</span>';
29 -1 updateDOM(target, source);
-1 25 updateDOM(target, '<span>hallo</span> <span>world</span>');
30 26 expect(n(target.innerHTML)).to.equal('<span>hallo</span> <span>world</span>');
31 27 });
32 28 it('removes existing elements', function() {
33 -1 source.innerHTML = '<span>hallo</span>';
34 29 target.innerHTML = '<span>hallo</span> <span>world</span>';
35 -1 updateDOM(target, source);
-1 30 updateDOM(target, '<span>hallo</span>');
36 31 expect(n(target.innerHTML)).to.equal('<span>hallo</span>');
37 32 });
38 33 it('replaces elements by text nodes', function() {
39 -1 source.innerHTML = 'hallo';
40 34 target.innerHTML = '<span>hallo</span>';
41 -1 updateDOM(target, source);
-1 35 updateDOM(target, 'hallo');
42 36 expect(n(target.innerHTML)).to.equal('hallo');
43 37 });
44 38 it('replaces elements by other elements', function() {
45 -1 source.innerHTML = '<div>hallo</div>';
46 39 target.innerHTML = '<span class="muu-test">hallo</span>';
47 -1 updateDOM(target, source);
-1 40 updateDOM(target, '<div>hallo</div>');
48 41 expect(n(target.innerHTML)).to.equal('<div>hallo</div>');
49 42 });
50 43 it('can replace and add elements in the same parent', function() {
51 -1 source.innerHTML = '<div>1</div> <div>2</div>';
52 44 target.innerHTML = '<span>1</span>';
53 -1 updateDOM(target, source);
-1 45 updateDOM(target, '<div>1</div> <div>2</div>');
54 46 expect(n(target.innerHTML)).to.equal('<div>1</div> <div>2</div>');
55 47 });
56 48 it('can replace more than one element in the same parent', function() {
57 -1 source.innerHTML = '<div>1</div> <div>2</div>';
58 49 target.innerHTML = '<span>1</span> <span>2</span>';
59 -1 updateDOM(target, source);
-1 50 updateDOM(target, '<div>1</div> <div>2</div>');
60 51 expect(n(target.innerHTML)).to.equal('<div>1</div> <div>2</div>');
61 52 });
62 53 it('can replace and remove elements in the same parent', function() {
63 -1 source.innerHTML = '<div>1</div>';
64 54 target.innerHTML = '<span>1</span> <div>2</div>';
65 -1 updateDOM(target, source);
-1 55 updateDOM(target, '<div>1</div>');
66 56 expect(n(target.innerHTML)).to.equal('<div>1</div>');
67 57 });
68 58 it('adds new attributes', function() {
69 -1 source.innerHTML = '<span class="test">hallo</span>';
70 59 target.innerHTML = '<span>hallo</span>';
71 -1 updateDOM(target, source);
-1 60 updateDOM(target, '<span class="test">hallo</span>');
72 61 expect(n(target.innerHTML)).to.equal('<span class="test">hallo</span>');
73 62 });
74 63 it('removes existing attributes', function() {
75 -1 source.innerHTML = '<span>hallo</span>';
76 64 target.innerHTML = '<span class="test">hallo</span>';
77 -1 updateDOM(target, source);
-1 65 updateDOM(target, '<span>hallo</span>');
78 66 expect(n(target.innerHTML)).to.equal('<span>hallo</span>');
79 67 });
80 68 it('preserves all classes prefixed with "muu-"', function() {
81 -1 source.innerHTML = '<span class="test">hallo</span>';
82 69 target.innerHTML = '<span class="muu-test">hallo</span>';
83 -1 updateDOM(target, source);
-1 70 updateDOM(target, '<span class="test">hallo</span>');
84 71 expect(n(target.innerHTML)).to.equal('<span class="test muu-test">hallo</span>');
85 72 });
86 73 it('preserves input value', function() {
87 -1 source.innerHTML = '<input class="test">';
88 74 target.innerHTML = '<input>';
89 75 target.querySelector('input').value = '1';
90 -1 updateDOM(target, source);
-1 76 updateDOM(target, '<input class="test">');
91 77 expect(n(target.innerHTML)).to.contain('class="test"');
92 78 expect(target.querySelector('input').value).to.equal('1');
93 79 });
94 80 it('preserves input checked on checkbox', function() {
95 -1 source.innerHTML = '<input type="checkbox" class="test">';
96 81 target.innerHTML = '<input type="checkbox">';
97 82 target.querySelector('input').checked = true;
98 -1 updateDOM(target, source);
-1 83 updateDOM(target, '<input type="checkbox" class="test">');
99 84 expect(n(target.innerHTML)).to.contain('class="test"');
100 85 expect(target.querySelector('input').checked).to.be.ok();
101 86 });
102 87 it('does not change children of .muu-isolate', function() {
103 -1 source.innerHTML = '<div class="muu-isolate"><span>huhu</span></div>';
104 88 target.innerHTML = '<div class="muu-isolate"><div>haha</div></div>';
105 -1 updateDOM(target, source);
-1 89 updateDOM(target, '<div class="muu-isolate"><span>huhu</span></div>');
106 90 expect(n(target.innerHTML)).to.contain('<div>haha</div>');
107 91 });
108 92 it('does change attributes of .muu-isolate', function() {
109 -1 source.innerHTML = '<div class="muu-isolate" data-name="foo"></div>';
110 93 target.innerHTML = '<div class="muu-isolate" data-name="bar"></div>';
111 -1 updateDOM(target, source);
-1 94 updateDOM(target, '<div class="muu-isolate" data-name="foo"></div>');
112 95 expect(n(target.innerHTML)).to.be('<div class="muu-isolate" data-name="foo"></div>');
113 96 });
114 97 });