diff --git a/examples.html b/examples.html index f5a09df..023e32a 100644 --- a/examples.html +++ b/examples.html @@ -15,6 +15,10 @@ pageTitle : "Weld examples", description : "Below is a list of examples", dogfood : "This page was rendered with weld", + link: { + "@.": "foo", + "@href": "bar" + }, example : [ { title : 'Render an object into some elements', @@ -44,6 +48,7 @@

Random title

This is a description about this page..

+

here is some dogfood

diff --git a/lib/weld.js b/lib/weld.js index f66fee3..1f71516 100644 --- a/lib/weld.js +++ b/lib/weld.js @@ -1,4 +1,4 @@ -;(function(exports) { +(function(exports) { // shim out Object.keys // ES5 15.2.3.14 // http://whattheheadsaid.com/2010/10/a-safer-object-keys-compatibility-implementation @@ -329,7 +329,9 @@ } } ops.traverse(templateParent, target, i, value[i], value[i]); - ops.insert(templateParent, target, i, value[i]); + if (ops.insertPrecheck(templateParent, target, i, value[i])) { + ops.insert(templateParent, target, i, value[i]); + } } // OBJECT @@ -340,6 +342,27 @@ obj = value[lkey]; target = ops.match(template, element, lkey, obj); + if(lkey.length > 1 && lkey[0] == '@') { + var attr = lkey.substr(1); + + if(attr == '.') { + + // set the element's value as normal + if(~({}).toString.call(value).indexOf('Date')) { + value[lkey] = value[lkey].toString(); + } + + if (value.nodeType || typeof value[lkey] !== 'object') { + ops.set(parent, element, key, value[lkey], row); + } + } else { + // set the element's attribute + element.setAttribute(attr, value[lkey]); + } + + continue; + } + if (target) { ops.traverse(template, target, lkey, obj, row); @@ -376,6 +399,9 @@ } }, map : false, // this is a user-defined operation + insertPrecheck : function(parent, element, key, value) { + return true; + }, insert : function(parent, element) { // Insert the template back into document if (element.weld && element.weld.insertBefore) { @@ -444,6 +470,8 @@ return res; }, match : function match(parent, element, key, value) { + if(key[0] == '@') return; + if(typeof config.alias[key] !== 'undefined') { if(typeof config.alias[key] === 'function') { key = config.alias[key](parent, element, key, value) || key; diff --git a/lib/weld.min.js b/lib/weld.min.js index 3353c24..085be62 100644 --- a/lib/weld.min.js +++ b/lib/weld.min.js @@ -1 +1,10 @@ -(function(i){var o=(typeof console==="undefined")?{log:function(){}}:console;var a=false;if(typeof require!=="undefined"){var m=require("tty");if(m.isatty&&m.isatty(0)){a=true}}var h={gray:"\033[37m",darkgray:"\033[40;30m",red:"\033[31m",green:"\033[32m",yellow:"\033[33m",lightblue:"\033[1;34m",cyan:"\033[36m",white:"\033[1;37m"},c=/input|select|textarea|option|button/i,g=/img/i,l=0,f=a?(h.green+" ✓"+h.gray):" Success",k=a?(h.red+" ✗"+h.gray):" Fail",j=function j(r,d){var q=r.toUpperCase();return function(v,u,t,w){o.log(e(),((a?(h.gray+"┌ "):"+ ")+q+" -"),"parent:",b(v)+",","element:",b(u)+",","key:",b(t)+",","value:",b(w));l+=1;if(d){var s=d(v,u,t,w);l-=1;o.log(e(),(a?"└ ":"+ ")+u+""+(s!==false?f:k));return s}l-=1;n("- OPERATION NOT FOUND: ",q)}},e=function e(){var d=l,q="";while(d--){q+=a?" │ ":" | "}return q},n=function n(){var d=Array.prototype.slice.call(arguments);o.log(e(),d.join(" "))},b=function b(r){var q=r+"",d="undefined";if(a){if(q==="false"||q==="null"||q===""||q===d||typeof r===d||r===false){if(q===""){q="(empty string)"}return h.red+q+h.gray}else{return h.yellow+q+h.gray}}return q};i.weld=function p(y,u,D){var t={alias:{},debug:false,insert:false},s={siblings:function A(L,G,N,K){var H=[],M,F,E,I,J=L.children;cs=J.length;G.weld={parent:L,classes:G.className.split(" ")};while(cs--){M=J[cs];if(M===G){if(cs-1){return L}}}}}},B=y.parentNode,q,r,z,d;if(D){for(r in D){if(D.hasOwnProperty(r)){t[r]=D[r]}}}d=t.debug;for(q in s){if(s.hasOwnProperty(q)){currentOp=s[q];z=t[q]||s[q];if(d){z=j(q,z)}s[q]=z}}s.traverse(null,y,null,u);if(t.debug){o.log(B.innerHTML)}}})((typeof exports==="undefined")?window:exports); \ No newline at end of file +(function(w){if(!Object.keys){var y=!0,z="toString toLocaleString valueOf hasOwnProperty isPrototypeOf propertyIsEnumerable constructor".split(" "),A=z.length,B;for(B in{toString:null})y=!1;Object.keys=function(e){if("object"!==typeof e&&"function"!==typeof e||null===e)throw new TypeError("Object.keys called on a non-object");var b=[],f;for(f in e)e.hasOwnProperty(f)&&b.push(f);if(y)for(f=0;f>>0;if(0===f)return-1;var a=0;0=f)return-1;for(a=0<=a?a:Math.max(f-Math.abs(a),0);ac.weld.classes.indexOf(d[a])){b=!1;break}b&&(p&&t("- REMOVE - element:",l(m),"class:",l(m.className),"id:",l(m.id)),v.removeChild(m))}},traverse:function(a,c,m,d,e){var b,f,h,g=c.parentNode;~{}.toString.call(d).indexOf("Date")&&(d=d.toString());if(d.nodeType||"object"!==typeof d)k.set(a,c,m,d,e);else if(d.length&&d[0])for(g? +k.siblings(g,c,m,d):c.weld&&c.weld.parent&&(g=c.weld.parent),m=d.length,a=0;acheckbox +
+ text + text + text +
+ +
+
+
+
+
diff --git a/test/test.js b/test/test.js index 806c0ff..ededed8 100644 --- a/test/test.js +++ b/test/test.js @@ -492,5 +492,56 @@ }); }, + "Test 22: Set attribute and text values": function(test) { + getTemplate('attribute-test', function(window, weld, $, template) { + + var data = { + 'link1': {"@href" : "http://google.com" }, + 'link2': {"@." : "Google" }, + 'link3': {"@." : "Google Me", "@href" : "https://google.com" }, + }; + + weld(template, data); + + // only set href + test.ok($('#a1', template).attr('href') === "http://google.com"); + test.ok($('#a1', template).text() === "text"); + + // only set the anchor text + test.ok($('#a2', template).attr('href') === "#"); + test.ok($('#a2', template).text() === "Google"); + + // set both href and anchor text + test.ok($('#a3', template).attr('href') === "https://google.com"); + test.ok($('#a3', template).text() === "Google Me"); + + test.done(); + }); + }, + "Test 23: Selectively insert objects using the insert-precheck filter": function(test) { + getTemplate('insert-precheck', function(window, weld, $) { + + weld($('.things')[0], + { + things: [ + { thing : '1' }, + { thing : '2' }, + { thing : '3' } + ] + }, + { + insertPrecheck: function(parent, element, key, value) { + // don't insert the second "thing" by returning false + return value.thing != '2'; + } + }); + + test.ok($('.things').length === 2); + test.ok($('.things:nth(0) .thing').text() === '1'); + test.ok($('.things:nth(1) .thing').text() === '3'); + + test.done(); + }); + }, }; }((typeof module === "undefined") ? window : module.exports));