move sd-model into separate file

README.md

@@ -18,13 +18,9 @@ Mini MVVM framework
 
 ## Browser Support
 
-- Chrome 8+
-- Firefix 3.6+
-- Safari 5.1+
+- Most Webkit/Blink-based browsers
+- Firefix 4+
 - IE9+ (IE9 needs [classList polyfill](https://github.com/remy/polyfills/blob/master/classList.js))
-- Opera 11.6+
-- Android browser 3.0+
-- iOS Safari 5.0+
 
 ## Installation
 

component.json

@@ -21,7 +21,8 @@
         "src/filters.js",
         "src/directives/index.js",
         "src/directives/repeat.js",
-        "src/directives/on.js"
+        "src/directives/on.js",
+        "src/directives/model.js"
     ],
     "dependencies": {
         "component/emitter": "*"

src/directives/index.js

@@ -1,18 +1,21 @@
+var utils = require('../utils')
+
 module.exports = {
 
     on     : require('./on'),
     repeat : require('./repeat'),
+    model  : require('./model'),
 
     attr: function (value) {
         this.el.setAttribute(this.arg, value)
     },
 
     text: function (value) {
-        this.el.textContent = toText(value)
+        this.el.textContent = utils.toText(value)
     },
 
     html: function (value) {
-        this.el.innerHTML = toText(value)
+        this.el.innerHTML = utils.toText(value)
     },
 
     style: {
@@ -44,59 +47,6 @@ module.exports = {
         }
     },
 
-    model: {
-        bind: function () {
-            var self = this,
-                el   = self.el,
-                type = el.type,
-                lazy = self.compiler.options.lazy
-            self.event =
-                (lazy ||
-                el.tagName === 'SELECT' ||
-                type === 'checkbox' ||
-                type === 'radio')
-                    ? 'change'
-                    : 'keyup'
-            self.attr = type === 'checkbox'
-                ? 'checked'
-                : 'value'
-            self.set = function () {
-                self.lock = true
-                self.vm.$set(self.key, el[self.attr])
-                self.lock = false
-            }
-            el.addEventListener(self.event, self.set)
-        },
-        update: function (value) {
-            var self = this,
-                el   = self.el
-            if (self.lock) return
-            if (el.type === 'radio') {
-                /* jshint eqeqeq: false */
-                el.checked = value == el.value
-            } else if (el.tagName === 'SELECT') {
-                // you cannot set <select>'s value in stupid IE9
-                var o = el.options,
-                    i = o.length,
-                    index = -1
-                while (i--) {
-                    if (o[i].value == value) {
-                        index = i
-                        break
-                    }
-                }
-                o.selectedIndex = index
-            } else {
-                this.el[this.attr] = this.attr === 'checked'
-                    ? !!value
-                    : toText(value)
-            }
-        },
-        unbind: function () {
-            this.el.removeEventListener(this.event, this.set)
-        }
-    },
-
     'if': {
         bind: function () {
             this.parent = this.el.parentNode
@@ -140,13 +90,4 @@ function convertCSSProperty (prop) {
     return prop.replace(CONVERT_RE, function (m, char) {
         return char.toUpperCase()
     })
-}
-
-/*
- *  Make sure only strings and numbers are output to html
- */
-function toText (value) {
-    return (typeof value === 'string' || typeof value === 'number')
-        ? value
-        : ''
 }

src/directives/model.js

@@ -0,0 +1,65 @@
+var utils = require('../utils')
+
+module.exports = {
+
+    bind: function () {
+
+        var self = this,
+            el   = self.el,
+            type = el.type
+
+        self.lock = false
+
+        // determine what event to listen to
+        self.event =
+            (self.compiler.options.lazy ||
+            el.tagName === 'SELECT' ||
+            type === 'checkbox' ||
+            type === 'radio')
+                ? 'change'
+                : 'keyup'
+
+        // determin the attribute to change when updating
+        var attr = type === 'checkbox'
+            ? 'checked'
+            : 'value'
+
+        // attach listener
+        self.set = function () {
+            self.lock = true
+            self.vm.$set(self.key, el[attr])
+            self.lock = false
+        }
+        el.addEventListener(self.event, self.set)
+    },
+
+    update: function (value) {
+        /* jshint eqeqeq: false */
+        var self = this,
+            el   = self.el
+        if (self.lock) return
+        if (el.tagName === 'SELECT') { // select dropdown
+            // setting <select>'s value in IE9 doesn't work
+            var o = el.options,
+                i = o.length,
+                index = -1
+            while (i--) {
+                if (o[i].value == value) {
+                    index = i
+                    break
+                }
+            }
+            o.selectedIndex = index
+        } else if (el.type === 'radio') { // radio button
+            el.checked = value == el.value
+        } else if (el.type === 'checkbox') { // checkbox
+            el.checked = !!value
+        } else {
+            el.value = utils.toText(value)
+        }
+    },
+
+    unbind: function () {
+        this.el.removeEventListener(this.event, this.set)
+    }
+}

src/utils.js

@@ -32,6 +32,18 @@ module.exports = {
         return toString.call(obj).slice(8, -1)
     },
 
+    /*
+     *  Make sure only strings and numbers are output to html
+     *  output empty string is value is not string or number
+     */
+    toText: function (value) {
+        /* jshint eqeqeq: false */
+        return (typeof value === 'string' ||
+            (typeof value === 'number' && value == value)) // deal with NaN
+            ? value
+            : ''
+    },
+
     /*
      *  simple extend
      */