feat: support DOM driven value population

remy · remy · commit fa736bbbdb9b · 2015-08-22T11:15:04.000+01:00
As per discussion here: https://remysharp.com/2015/06/02/bind#comment-2204933433 now if the value in the bind object is `null` it'll populate it from the DOM (if one is provided).
diff --git a/.jscsrc b/.jscsrc
@@ -0,0 +1,13 @@
+{
+  "preset": "node-style-guide",
+  "requireCapitalizedComments": null,
+  "requireSpacesInAnonymousFunctionExpression": {
+    "beforeOpeningCurlyBrace": true,
+    "beforeOpeningRoundBrace": true
+  },
+  "disallowSpacesInNamedFunctionExpression": {
+    "beforeOpeningRoundBrace": true
+  },
+  "excludeFiles": ["node_modules/**"],
+  "disallowSpacesInFunction": null
+}
diff --git a/karma.conf.js b/karma.conf.js
@@ -65,7 +65,7 @@ module.exports = function (config) {
     // - PhantomJS
     // - IE (only Windows)
     // CLI --browsers Chrome,Firefox,Safari
-    browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'],
+    browsers: [process.env.TRAVIS ? 'Firefox' : 'ChromeCanary'],
 
     // If browser does not capture in given timeout [ms], kill it
     // CLI --capture-timeout 5000
diff --git a/lib/bind.js b/lib/bind.js
@@ -168,6 +168,16 @@ var Bind = (function Bind(global) {
         // the node type, and either sets the input.value or
         // element.innerHTML to the value
         var valueSetters = ['SELECT', 'INPUT', 'PROGRESS'];
+
+        if (value === null || value === undefined) {
+          if (valueSetters.indexOf(elements[0].nodeName) !== -1) {
+            value = parse(elements[0].value);
+          } else {
+            value = parse(elements[0].innerHTML);
+          }
+        }
+
+
         var oldCallback = callback;
         callback = function (value) {
           // make it a live selection
@@ -311,6 +321,10 @@ var Bind = (function Bind(global) {
         path.reduce(function (prev, curr, i) {
           if (prev && prev[curr] && curr) {
             instance = instance[curr];
+
+            if (instance === null || instance === undefined) {
+              return prev[curr] || {};
+            }
             if (typeof prev[curr].__callback === 'function') {
               var v = i === path.length - 1 ? value : instance;
               if (instance.__dirty) {
diff --git a/test/dom-values.browser.js b/test/dom-values.browser.js
@@ -0,0 +1,39 @@
+'use strict';
+var assert = require('assert');
+var html = require('./html');
+var Bind = require('../');
+
+/*globals describe, assert, beforeEach, Bind, it */
+describe('DOM values informing bind', function () {
+  var data;
+
+  beforeEach(function () {
+    html(window.__html__['test/dom-values.html']);
+
+    data = new Bind({
+      score: undefined,
+      price: null,
+    }, {
+      score: '.score',
+      price: {
+        dom: '.price',
+        parse: function (v) {
+          return parseFloat(v.replace(/£/, ''));
+        },
+        transform: function (v) {
+          return '£' + v;
+        },
+      },
+    });
+  });
+
+  it('should find selectors', function () {
+    var nodes = document.querySelectorAll('.score');
+    assert.equal(nodes.length, 2, 'expected to find two .score els');
+  });
+
+  it('should update bind values based on DOM', function () {
+    assert.equal(data.score, '10', 'bind value is correct: ' + data.score);
+    assert.ok(data.price === 100, 'price is right: ' + data.price);
+  });
+});
diff --git a/test/dom-values.html b/test/dom-values.html
@@ -0,0 +1,4 @@
+<span class="score">10</span>
+<progress class="score" min=0 max=100>
+
+<p class="price">£100</p>
diff --git a/test/export.test.js b/test/export.test.js
@@ -3,10 +3,8 @@ var sinon = require('sinon');
 var assert = require('assert');
 var Bind = require('../');
 
-/*globals describe, assert, beforeEach, Bind, sinon, it */
+/* globals describe, assert, Bind, sinon, it */
 describe('export', function () {
-  var data;
-
   it('returns vanilla object', function () {
     var spy = sinon.spy();
     var o = {
@@ -16,7 +14,7 @@ describe('export', function () {
         location: 'house',
       },
     };
-    var data = Bind(o, {
+    var data = new Bind(o, {
       name: spy,
     });
 
diff --git a/test/two-way.browser.js b/test/two-way.browser.js
@@ -14,15 +14,17 @@ describe('two way data bind', function () {
     data = Bind({
       score: 10,
       name: 'Julie',
+      body: 'Some really long\nstatement about stuff',
     }, {
       score: '.score',
       name: '.name',
+      body: 'textarea.body',
     });
   });
 
   it('should find selectors', function () {
-    var target = data.score = 10;
     var nodes = document.querySelectorAll('.score');
+    assert.equal(nodes.length, 3, 'found DOM nodes: ' + nodes.length);
   });
 
   it('should update DOM to data values', function () {
