Skip to content

brainfood / rivets-error-binder

Go to a project
Toggle navigation
Toggle navigation pinning
219209c6 by Adam Heath
Options

No longer hard-code any of the html handling; it's now delegated to a 

render function that should be specified in the requirejs module config.
1 parent 5a3a0008
Inline Side-by-side
Showing 4 changed files with 75 additions and 19 deletions
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
18 "backbone-seen": "git@gitlab.brainfood.com:brainfood/backbone-seen.git", 18 "backbone-seen": "git@gitlab.brainfood.com:brainfood/backbone-seen.git",
19 "backbone": "~1.1.0", 19 "backbone": "~1.1.0",
20 "backbone-validation": "0.9.1", 20 "backbone-validation": "0.9.1",
21 "bootstrap": "~3.1.0",
22 "jquery": "~1.10.2", 21 "jquery": "~1.10.2",
23 "requirejs": "~2.1.10", 22 "requirejs": "~2.1.10",
24 "rivets": "~0.6.6", 23 "rivets": "~0.6.6",
......
...@@ -5,6 +5,9 @@ require = (function() { ...@@ -5,6 +5,9 @@ require = (function() {
5 5
6 var require = { 6 var require = {
7 baseUrl: 'scripts', 7 baseUrl: 'scripts',
8 config: {
9 'rivets-error-binder': {}
10 },
8 shim: { 11 shim: {
9 bootstrap: { 12 bootstrap: {
10 deps: [ 13 deps: [
......
1 define(['rivets', 'bootstrap'], function(rivets) { 1 define([
2 'module',
3 'rivets',
4 ], function(
5 module,
6 rivets
7 ) {
2 'use strict'; 8 'use strict';
3 var rivetsBinderCall = function(binding, binderName, methodName, args) { 9 var rivetsBinderCall = function(binding, binderName, methodName, args) {
4 var binder = rivets.binders[binderName]; 10 var binder = rivets.binders[binderName];
...@@ -13,22 +19,10 @@ define(['rivets', 'bootstrap'], function(rivets) { ...@@ -13,22 +19,10 @@ define(['rivets', 'bootstrap'], function(rivets) {
13 } 19 }
14 }; 20 };
15 21
16 var render = function(el, cmd, errorList) { 22 var render = function() {
17 switch (cmd) { 23 var renderImpl = module.config().render;
18 case 'focus': 24 if (renderImpl) {
19 break; 25 return renderImpl.apply(this, arguments);
20 case 'blur':
21 break;
22 case 'validated':
23 if (errorList) {
24 $(el).tooltip({title: errorList, trigger: 'focus'});
25 $(el).tooltip('show');
26 $(el).parent().addClass('has-error');
27 } else {
28 $(el).tooltip('destroy');
29 $(el).parent().removeClass('has-error');
30 }
31 break;
32 } 26 }
33 }; 27 };
34 28
......
...@@ -23,7 +23,29 @@ define(function(require) { ...@@ -23,7 +23,29 @@ define(function(require) {
23 var scope; 23 var scope;
24 var test; 24 var test;
25 var view; 25 var view;
26 var render;
26 beforeEach(function() { 27 beforeEach(function() {
28 render = function(el, cmd, errorList) {
29 render.lastCmd = cmd;
30 render.lastErrorList = errorList;
31 switch (cmd) {
32 case 'focus':
33 render.counts.focus++;
34 break;
35 case 'blur':
36 render.counts.blur++;
37 break;
38 case 'validated':
39 if (errorList) {
40 render.counts.validatedError++;
41 } else {
42 render.counts.validatedClean++;
43 }
44 break;
45 }
46 };
47 render.counts = {focus: 0, blur: 0, validatedError: 0, validatedClean: 0};
48
27 jasmine.Clock.useMock(); 49 jasmine.Clock.useMock();
28 Model = BackboneSeen.mixin(Backbone.Model.extend()); 50 Model = BackboneSeen.mixin(Backbone.Model.extend());
29 Collection = Backbone.Collection.extend({model: Model}); 51 Collection = Backbone.Collection.extend({model: Model});
...@@ -45,12 +67,46 @@ define(function(require) { ...@@ -45,12 +67,46 @@ define(function(require) {
45 }); 67 });
46 68
47 69
48 it('existing', function() { 70 it('existing-no-render', function() {
71 var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:constant" /></form></div>'));
72 $(document).find('body').append($node[0]);
73 var $1 = $node.find('#_1');
74 expect($1.length).toEqual(1);
75 expect($1.val()).toEqual('');
76 expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
77 view = rivets.bind($node, scope.attributes);
78 expect(view).toBeTruthy();
79 expect($1.val()).toEqual('CONSTANT');
80 //expect($node.html()).toBe('');
81 test.set('constant', 'one');
82 expect($1.val()).toEqual('one');
83 test.set('constant', '');
84 expect($1.val()).toEqual('');
85 test.set('constant', 'CONSTANT');
86 expect($1.val()).toEqual('CONSTANT');
87
88 expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
89 $1.focus().val('one').change().blur();
90 jasmine.Clock.tick(1);
91 expect(test.get('constant')).toEqual('one');
92 expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
93
94 $1.focus().val('').change().blur();
95 jasmine.Clock.tick(1);
96 expect(test.get('constant')).toEqual('');
97 expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
98 jasmine.Clock.tick(1);
99 expect(render.lastErrorList).toBeUndefined();
100 });
101 it('existing-with-render', function() {
102 /* global requirejs */
103 requirejs.config({config: {'rivets-error-binder': { render: render } } });
49 var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:constant" /></form></div>')); 104 var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:constant" /></form></div>'));
50 $(document).find('body').append($node[0]); 105 $(document).find('body').append($node[0]);
51 var $1 = $node.find('#_1'); 106 var $1 = $node.find('#_1');
52 expect($1.length).toEqual(1); 107 expect($1.length).toEqual(1);
53 expect($1.val()).toEqual(''); 108 expect($1.val()).toEqual('');
109 expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
54 view = rivets.bind($node, scope.attributes); 110 view = rivets.bind($node, scope.attributes);
55 expect(view).toBeTruthy(); 111 expect(view).toBeTruthy();
56 expect($1.val()).toEqual('CONSTANT'); 112 expect($1.val()).toEqual('CONSTANT');
...@@ -62,14 +118,18 @@ define(function(require) { ...@@ -62,14 +118,18 @@ define(function(require) {
62 test.set('constant', 'CONSTANT'); 118 test.set('constant', 'CONSTANT');
63 expect($1.val()).toEqual('CONSTANT'); 119 expect($1.val()).toEqual('CONSTANT');
64 120
121 expect(render.counts).toEqual({focus : 0, blur : 0, validatedError : 0, validatedClean : 0});
65 $1.focus().val('one').change().blur(); 122 $1.focus().val('one').change().blur();
66 jasmine.Clock.tick(1); 123 jasmine.Clock.tick(1);
67 expect(test.get('constant')).toEqual('one'); 124 expect(test.get('constant')).toEqual('one');
125 expect(render.counts).toEqual({focus : 1, blur : 1, validatedError : 0, validatedClean : 1});
68 126
69 $1.focus().val('').change().blur(); 127 $1.focus().val('').change().blur();
70 jasmine.Clock.tick(1); 128 jasmine.Clock.tick(1);
71 expect(test.get('constant')).toEqual(''); 129 expect(test.get('constant')).toEqual('');
130 expect(render.counts).toEqual({focus : 2, blur : 2, validatedError : 1, validatedClean : 1});
72 jasmine.Clock.tick(1); 131 jasmine.Clock.tick(1);
132 expect(render.lastErrorList).toEqual(jasmine.any(String));
73 }); 133 });
74 it('missing', function() { 134 it('missing', function() {
75 var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:missing:child" /></form></div>')); 135 var $node = $($.parseHTML('<div><form><input id="_1" rv-error-value="test:missing:child" /></form></div>'));
......