Feature insert precheck

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 @@ <h1 class="pageTitle">Random title</h1>
   <p class="description">
     This is a description about this page..
   </p>
+  <a href="" class="link"></a>
   <p class="dogfood">
     here is some dogfood
   </p>

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;

test/test.html

@@ -155,6 +155,17 @@ <h1>checkbox</h1>
 
       </div>
 
+      <div id="attribute-test">
+        <a id="a1" class="link1" href="#">text</a>
+        <a id="a2" class="link2" href="#">text</a>
+        <a id="a3" class="link3" href="#">text</a>
+      </div>  
+
+      <div id="insert-precheck">
+        <div class="things">
+          <div class="thing"></div>
+        </div>
+      </div>
     </div>
   </body>
 </html>

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));