Skip to content
Browse files

Add: support for checkboxes

  • Loading branch information...
1 parent a059619 commit a1b64b7b18ad5b1c3c5d471243a6f90ee669b49b @tmpvar committed
Showing with 112 additions and 45 deletions.
  1. +11 −1 lib/weld.js
  2. +2 −2 package.json
  3. +22 −10 test/test.html
  4. +77 −32 test/test.js
View
12 lib/weld.js
@@ -112,6 +112,7 @@
var inputRegex = /input|select|option|button/i;
var imageRegex = /img/i;
var textareaRegex = /textarea/i;
+ var truthyRegex = /yes|true|1|ok/i;
var depth = 0; // The current depth of the traversal, used for debugging.
var successIndicator = nodejs ? (color.green + '' + color.gray) : ' Success';
var failureIndicator = nodejs ? (color.red + '' + color.gray) : ' Fail';
@@ -411,7 +412,16 @@
res = true;
}
else if (type === 'input') { // special cases.
- element.setAttribute('value', value);
+ if (element.type.toLowerCase() === 'checkbox') {
+
+ if (truthyRegex.test(value)) {
+ element.setAttribute('checked', true);
+ } else if (element.hasAttribute('checked')) {
+ element.removeAttribute('checked');
+ }
+ } else {
+ element.setAttribute('value', value);
+ }
res = true;
}
else if (type === 'image') {
View
4 package.json
@@ -1,6 +1,6 @@
{
"name": "weld",
- "version": "0.2.1",
+ "version": "0.2.2",
"description": "Template antimatter for javascript",
"keywords": ["templates", "templating", "jsdom", "unobtrusive"],
"author" : "hij1nx <hij1nx@gmail.com> http://twitter.com/hij1nx",
@@ -11,7 +11,7 @@
"licenses": [{"type": "MIT"}],
"repositories": [{
"type": "git",
- "url": "git@github.com:hij1nx/weld.git"
+ "url": "git@github.com:hij1nx/weld.git"
}],
"dependencies": {
"jsdom" : ">= 0.2.0"
View
32 test/test.html
@@ -36,7 +36,7 @@ <h1 class="name">Another Person's name</h1>
</li>
<li class="person bar">Sidecase #1: associated data key</li>
<li class="person submit">Sidecase #2: additional classes (no data equiv)</li>
- </ul>
+ </ul>
<ul id="contacts-alias" class="contacts" style="display: none">
<li class="contact">
@@ -51,7 +51,7 @@ <h1 class="name">Another Person's name</h1>
<p class="title">Leet Developer</p>
</li>
</ul>
-
+
<div id="contacts-none">
<ul class="contacts" style="display: none">
<li class="contact">
@@ -69,7 +69,7 @@ <h1 class="name">Another Person's name</h1>
</p>
</li>
</ul>
-
+
<ul id="contacts-opt-out" class="contacts" style="display: none">
<li class="contact">
<span class="name foo">My Name</span>
@@ -77,7 +77,7 @@ <h1 class="name">Another Person's name</h1>
Leet Developer
</p>
</li>
- </ul>
+ </ul>
<form id="form" action="/" method="post" style="display: none">
<p>
@@ -111,22 +111,22 @@ <h1 class="name">Another Person's name</h1>
<span>two</span>
</div>
</div>
-
+
<div id="temp">
</div>
-
+
<ul id="alternate-values" style="display: none">
<li class="contact">
<span class="name">Name</span>
<span class="age">0</span>
- <span class="awesome">Do you need to ask?</span>
+ <span class="awesome">Do you need to ask?</span>
</li>
- </ul>
+ </ul>
<div id="test" class="test" style="display: none">
<span class="name"></span> : <span class="data"></span>
</div>
-
+
<div id="depth-failure-on-miss">
<h1>Edit</h1>
<form action="/urls" method="post" class="links">
@@ -138,7 +138,19 @@ <h1 class="name">Another Person's name</h1>
<input type="submit" value="save" />
</form>
</div>
-
+
+ <div id="checkbox-test">
+ <h1>checkbox</h1>
+ <form action="/urls" method="post" class="links">
+ <p class="content">
+ <label>Yeah?</label><input name="question" type="checkbox" />
+ <label>Yeah?</label><input name="question2" type="checkbox" />
+ </p>
+ <input type="submit" value="save" />
+ </form>
+
+ </div>
+
</div>
</body>
</html>
View
109 test/test.js
@@ -32,22 +32,22 @@
test.ok($('.icon', template).attr('src') === data.icon);
test.ok($(':input[name="value"]', template).val() === data.value);
test.done();
-
+
});
-
+
},
-
+
"Test 3: Generate markup based on an element using the alias parameter to explicitly correlate data-keys and elements": function(test) {
-
+
getTemplate('contacts-alias', function(window, weld, $, template) {
var data = [{ name: 'hij1nx', title: 'code exploder' },
{ name: 'tmpvar', title: 'code pimp' }];
- weld($('.contact', template)[0], data, {
- alias: {
- 'name': 'foo',
- 'title': 'title'
+ weld($('.contact', template)[0], data, {
+ alias: {
+ 'name': 'foo',
+ 'title': 'title'
}
});
@@ -64,16 +64,16 @@
});
},
-
+
"Test 4: Generate markup based on an element using an (alias w/function) parameter to explicitly correlate data and elements": function(test) {
getTemplate('contacts-alias', function(window, weld, $, template) {
var data = [{ name: 'hij1nx', title: 'code exploder' },
{ name: 'tmpvar', title: 'code pimp' }];
- weld($('.contact', template)[0], data, {
- alias: {
- 'name' : function(parent, element, key, value) {
+ weld($('.contact', template)[0], data, {
+ alias: {
+ 'name' : function(parent, element, key, value) {
// Sanity
test.ok(key === 'name');
@@ -95,8 +95,8 @@
});
- },
-
+ },
+
"Test 5: Generate markup from an element with an alternate method of insertion": function(test) {
getTemplate('contacts', function(window, weld, $, template) {
var
@@ -118,7 +118,7 @@
test.ok($('.contact:nth(0) .title', template).text() == "code pimp");
test.ok($('.contact:nth(1) .title', template).text() == "code exploder");
-
+
test.ok(times === 2);
test.done();
});
@@ -150,9 +150,9 @@
test.done();
});
-
+
},
-
+
"Test 7: Create markup from an array of objects that have one dimention": function(test) {
getTemplate('contacts', function(window, weld, $, template) {
var data = [{ name: 'hij1nx', title : 'code exploder' },
@@ -167,7 +167,7 @@
test.ok($('.contact:nth(0) .title', template).text() == "code exploder");
test.ok($('.contact:nth(1) .title', template).text() == "code wrangler");
test.done();
-
+
});
},
@@ -192,14 +192,14 @@
// TODO: remove siblings who match .person
// it is impossible to do explicit maching (even/odd)
-
+
// SIDECASE FIX0r
// - when matching arrays
// - capture the className
// - compare with siblings[*].className (be aware of ordering!)
// - remove COMPLETE matches
- //
-
+ //
+
weld($('.people')[0], {
person: [
{
@@ -233,19 +233,19 @@
test.ok($('.person.bar').text() === "hello");
test.ok($('.person.bar').length === 1);
-
+
test.ok($('.person.submit').length === 1);
test.ok($('.person.submit').text() === "Sidecase #2: additional classes (no data equiv)");
// Every node that gets iterated over should have a pre-processed class
// (7 in total)
-
+
test.ok($('.pre-processed').length === 8);
test.done();
});
},
-
+
"Test 10: Create markup using form elements as the template": function(test) {
getTemplate('form', function(window, weld, $) {
@@ -326,9 +326,9 @@
{ name: 'tmpvar', title: 'code pimp' }],
found = 0;
- weld($('.contact', container)[0], data, {
- alias: {
- name : function(parent, element, key, value) {
+ weld($('.contact', container)[0], data, {
+ alias: {
+ name : function(parent, element, key, value) {
// Sanity
test.ok(key === 'name');
@@ -348,7 +348,7 @@
test.done();
});
},
-
+
"Test 15: Alias may opt out of rendering a data-key/element match because of a false value": function(test) {
getTemplate('contacts-opt-out', function(window, weld, $, container) {
@@ -358,8 +358,8 @@
{ name: 'tmpvar', title: 'code pimp' }],
found = 0;
- weld($('.contact', container)[0], data, {
- alias: {
+ weld($('.contact', container)[0], data, {
+ alias: {
name : false
}
});
@@ -403,7 +403,7 @@
test.done();
})
},
-
+
"Test 18: depth traversal shouldn't stop on a missed key [array]" : function(test) {
getTemplate('depth-failure-on-miss', function(window, weld, $, container) {
var data = {
@@ -432,6 +432,51 @@
test.done();
})
- }
+ },
+ "Test 18: checkboxes should work with boolean values" : function(test) {
+ getTemplate('checkbox-test', function(window, weld, $, container) {
+ var data = {
+ question: true,
+ question2: false
+ };
+
+ weld(container, data);
+
+ test.ok($(':input[name=question]').is(':checked') === true);
+ test.ok($(':input[name=question2]').is(':checked') === false);
+
+ test.done();
+ })
+ },
+ "Test 19: checkboxes should work with numeric string values" : function(test) {
+ getTemplate('checkbox-test', function(window, weld, $, container) {
+ var data = {
+ question: '1',
+ question2: '0'
+ };
+
+ weld(container, data);
+
+ test.ok($(':input[name=question]').is(':checked') === true);
+ test.ok($(':input[name=question2]').is(':checked') === false);
+
+ test.done();
+ })
+ },
+ "Test 20: checkboxes should work with english truthy string values" : function(test) {
+ getTemplate('checkbox-test', function(window, weld, $, container) {
+ var data = {
+ question: 'yes',
+ question2: 'no'
+ };
+
+ weld(container, data);
+
+ test.ok($(':input[name=question]').is(':checked') === true);
+ test.ok($(':input[name=question2]').is(':checked') === false);
+
+ test.done();
+ })
+ },
};
}((typeof module === "undefined") ? window : module.exports));

0 comments on commit a1b64b7

Please sign in to comment.
Something went wrong with that request. Please try again.