Firebase example + bug fixes

yyx990803 · yyx990803 · commit a8e12f8ccd73 · 2013-11-17T02:04:29.000-05:00
- move ensurePath() to Observer.js
- add Observer.ensurePaths(), which deals with the situation
  when a scope object with nested values is given a new value
  with incomplete nested structure. e.g. this.val = {}
- fix Directive argument regex
- sd-model: no longer locks during set() so filters work on
  input fields
- sd-repeat: handles undefined update, also fix transition
- utils.attr now takes additional `noRemove` argument
- ViewModel.$emit now also triggers event on itself
diff --git a/examples/firebase/app.js b/examples/firebase/app.js
@@ -0,0 +1,55 @@
+var baseURL = 'https://seed-demo.firebaseIO.com/',
+    Users   = new Firebase(baseURL + 'users')
+
+Users.on('child_added', function (snapshot) {
+    var item = snapshot.val()
+    item.id = snapshot.name()
+    app.users.push(item)
+})
+
+Users.on('child_removed', function (snapshot) {
+    var id = snapshot.name()
+    app.users.some(function (user) {
+        if (user.id === id) {
+            app.users.remove(user)
+            return true
+        }
+    })
+})
+
+var app = new Seed({
+    el: '#app',
+    filters: validators,
+    scope: {
+        users: [],
+        newUser: {
+            name: '',
+            email: ''
+        },
+        validation: {
+            name: false,
+            email: false
+        },
+        isValid: {
+            $get: function () {
+                var valid = true
+                for (var key in this.validation) {
+                    if (!this.validation[key]) {
+                        valid = false
+                    }
+                }
+                return valid
+            }
+        },
+        addUser: function (e) {
+            e.preventDefault()
+            if (this.isValid) {
+                Users.push(this.newUser)
+                this.newUser = {}
+            }
+        },
+        removeUser: function (e) {
+            new Firebase(baseURL + 'users/' + e.item.id).remove()
+        }
+    }
+})
diff --git a/examples/firebase/index.html b/examples/firebase/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title></title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="style.css">
+        <script src='https://cdn.firebase.com/v0/firebase.js'></script>
+        <script src="../../dist/seed.js"></script>
+    </head>
+    <body>
+        <div id="app">
+            <ul>
+                <li class="user" sd-repeat="user:users" sd-transition>
+                    <span>{{user.name}} - {{user.email}}</span>
+                    <button sd-on="click:removeUser">X</button>
+                </li>
+            </ul>
+            <form id="form" sd-on="submit:addUser">
+                <input sd-model="newUser.name | nameValidator | capitalize">
+                <input sd-model="newUser.email | emailValidator">
+                <input type="submit" value="Add User">
+            </form>
+            <ul class="errors">
+                <li sd-show="!validation.name">Name cannot be empty.</li>
+                <li sd-show="!validation.email">Please provide a valid email address.</li>
+            </ul>
+        </div>
+        <script src="validators.js"></script>
+        <script src="app.js"></script>
+    </body>
+</html>
diff --git a/examples/firebase/style.css b/examples/firebase/style.css
@@ -0,0 +1,24 @@
+ul {
+    padding: 0;
+}
+.user {
+    height: 30px;
+    line-height: 30px;
+    padding: 10px;
+    border-top: 1px solid #eee;
+    overflow: hidden;
+    transition: all .25s ease;
+}
+.user:last-child {
+    border-bottom: 1px solid #eee;
+}
+.sd-enter, .sd-leave {
+    height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-top-width: 0;
+    border-bottom-width: 0;
+}
+.errors {
+    color: #f00;
+}
diff --git a/examples/firebase/validators.js b/examples/firebase/validators.js
@@ -0,0 +1,13 @@
+var validators = (function () {
+    var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    return {
+        nameValidator: function (val) {
+            this.validation.name = !!val
+            return val
+        },
+        emailValidator: function (val) {
+            this.validation.email = emailRE.test(val)
+            return val
+        }
+    }
+})()
diff --git a/src/compiler.js b/src/compiler.js
@@ -161,8 +161,9 @@ CompilerProto.setupElement = function (options) {
  */
 CompilerProto.setupObserver = function () {
 
-    var bindings = this.bindings,
-        observer = this.observer = new Emitter(),
+    var compiler = this,
+        bindings = compiler.bindings,
+        observer = compiler.observer = new Emitter(),
         depsOb   = DepsParser.observer
 
     // a hash to hold event proxies for each root level key
@@ -172,18 +173,27 @@ CompilerProto.setupObserver = function () {
     // add own listeners which trigger binding updates
     observer
         .on('get', function (key) {
-            if (bindings[key] && depsOb.isObserving) {
+            check(key)
+            if (depsOb.isObserving) {
                 depsOb.emit('get', bindings[key])
             }
         })
         .on('set', function (key, val) {
             observer.emit('change:' + key, val)
-            if (bindings[key]) bindings[key].update(val)
+            check(key)
+            bindings[key].update(val)
         })
         .on('mutate', function (key, val, mutation) {
             observer.emit('change:' + key, val, mutation)
-            if (bindings[key]) bindings[key].pub()
+            check(key)
+            bindings[key].pub()
         })
+
+    function check (key) {
+        if (!bindings[key]) {
+            compiler.createBinding(key)
+        }
+    }
 }
 
 /**
@@ -438,7 +448,7 @@ CompilerProto.createBinding = function (key, isExp, isFn) {
         bindings[key] = binding
         // make sure the key exists in the object so it can be observed
         // by the Observer!
-        compiler.ensurePath(key)
+        Observer.ensurePath(compiler.vm, key)
         if (binding.root) {
             // this is a root level binding. we need to define getter/setters for it.
             compiler.define(key, binding)
@@ -454,25 +464,6 @@ CompilerProto.createBinding = function (key, isExp, isFn) {
     return binding
 }
 
-/**
- *  Sometimes when a binding is found in the template, the value might
- *  have not been set on the VM yet. To ensure computed properties and
- *  dependency extraction can work, we have to create a dummy value for
- *  any given path.
- */
-CompilerProto.ensurePath = function (key) {
-    var path = key.split('.'), sec, obj = this.vm
-    for (var i = 0, d = path.length - 1; i < d; i++) {
-        sec = path[i]
-        if (!obj[sec]) obj[sec] = {}
-        obj = obj[sec]
-    }
-    if (utils.typeOf(obj) === 'Object') {
-        sec = path[i]
-        if (!(sec in obj)) obj[sec] = undefined
-    }
-}
-
 /**
  *  Defines the getter/setter for a root-level binding on the VM
  *  and observe the initial value
@@ -523,6 +514,7 @@ CompilerProto.define = function (key, binding) {
                 // set new value
                 binding.value = newVal
                 ob.emit('set', key, newVal)
+                Observer.ensurePaths(key, newVal, compiler.bindings)
                 // now watch the new value, which in turn emits 'set'
                 // for all its nested values
                 Observer.observe(newVal, key, ob)
diff --git a/src/directive.js b/src/directive.js
@@ -7,7 +7,7 @@ var config     = require('./config'),
     // regex to split multiple directive expressions
     SPLIT_RE        = /(?:['"](?:\\.|[^'"])*['"]|\\.|[^,])+/g,
     KEY_RE          = /^[^\|]+/,
-    ARG_RE          = /([^:]+):(.+)$/,
+    ARG_RE          = /^([\w- ]+):(.+)$/,
     FILTERS_RE      = /\|[^\|]+/g,
     FILTER_TOKEN_RE = /[^\s']+|'[^']+'/g,
     NESTING_RE      = /^\^+/,
diff --git a/src/directives/model.js b/src/directives/model.js
@@ -27,9 +27,7 @@ module.exports = {
 
         // attach listener
         self.set = function () {
-            self.lock = true
             self.vm.$set(self.key, el[attr])
-            self.lock = false
         }
         el.addEventListener(self.event, self.set)
 
@@ -56,7 +54,6 @@ module.exports = {
         /* 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,
diff --git a/src/directives/repeat.js b/src/directives/repeat.js
@@ -103,6 +103,7 @@ module.exports = {
         ctn.insertBefore(self.ref, el)
         ctn.removeChild(el)
 
+        self.initiated = false
         self.collection = null
         self.vms = null
         self.mutationListener = function (path, arr, mutation) {
@@ -125,10 +126,11 @@ module.exports = {
         // if initiating with an empty collection, we need to
         // force a compile so that we get all the bindings for
         // dependency extraction.
-        if (!this.collection && !collection.length) {
+        if (!this.initiated && (!collection || !collection.length)) {
             this.buildItem()
+            this.initiated = true
         }
-        this.collection = collection
+        this.collection = collection || []
         this.vms = []
 
         // listen for collection mutation events
@@ -137,11 +139,13 @@ module.exports = {
         collection.__observer__.on('mutate', this.mutationListener)
 
         // create child-seeds and append to DOM
-        this.detach()
-        for (var i = 0, l = collection.length; i < l; i++) {
-            this.buildItem(collection[i], i)
+        if (collection.length) {
+            this.detach()
+            for (var i = 0, l = collection.length; i < l; i++) {
+                this.buildItem(collection[i], i)
+            }
+            this.retach()
         }
-        this.retach()
     },
 
     /**
@@ -164,6 +168,8 @@ module.exports = {
                 : this.ref
             // make sure it works with sd-if
             if (!ref.parentNode) ref = ref.sd_ref
+            // process transition info before appending
+            node.sd_trans = utils.attr(node, 'transition', true)
             transition(node, 1, function () {
                 ctn.insertBefore(node, ref)
             }, this.compiler)
diff --git a/src/observer.js b/src/observer.js
@@ -121,6 +121,7 @@ function bind (obj, key, path, observer) {
         },
         set: function (newVal) {
             values[fullKey] = newVal
+            ensurePaths(key, newVal, values)
             observer.emit('set', fullKey, newVal)
             watch(newVal, fullKey, observer)
         }
@@ -154,10 +155,45 @@ function emitSet (obj, observer, set) {
     }
 }
 
+/**
+ *  Sometimes when a binding is found in the template, the value might
+ *  have not been set on the VM yet. To ensure computed properties and
+ *  dependency extraction can work, we have to create a dummy value for
+ *  any given path.
+ */
+function ensurePaths (key, val, paths) {
+    key += '.'
+    for (var path in paths) {
+        if (!path.indexOf(key)) {
+            ensurePath(val, path.replace(key, ''))
+        }
+    }
+}
+
+/**
+ *  walk along a path and make sure it can be accessed
+ *  and enumerated in that object
+ */
+function ensurePath (obj, key) {
+    if (typeOf(obj) !== 'Object') return
+    var path = key.split('.'), sec
+    for (var i = 0, d = path.length - 1; i < d; i++) {
+        sec = path[i]
+        if (!obj[sec]) obj[sec] = {}
+        obj = obj[sec]
+    }
+    if (typeOf(obj) === 'Object') {
+        sec = path[i]
+        if (!(sec in obj)) obj[sec] = undefined
+    }
+}
+
 module.exports = {
 
     // used in sd-repeat
     watchArray: watchArray,
+    ensurePath: ensurePath,
+    ensurePaths: ensurePaths,
 
     /**
      *  Observe an object with a given path,
diff --git a/src/utils.js b/src/utils.js
@@ -26,10 +26,10 @@ var utils = module.exports = {
     /**
      *  get an attribute and remove it.
      */
-    attr: function (el, type) {
+    attr: function (el, type, noRemove) {
         var attr = attrs[type],
             val = el.getAttribute(attr)
-        if (val !== null) el.removeAttribute(attr)
+        if (!noRemove && val !== null) el.removeAttribute(attr)
         return val
     },
 
diff --git a/src/viewmodel.js b/src/viewmodel.js
@@ -92,7 +92,10 @@ def(VMProto, '$broadcast', function () {
  *  emit an event that propagates all the way up to parent VMs.
  */
 def(VMProto, '$emit', function () {
-    var parent = this.$compiler.parentCompiler
+    var compiler = this.$compiler,
+        emitter = compiler.emitter,
+        parent = compiler.parentCompiler
+    emitter.emit.apply(emitter, arguments)
     if (parent) {
         parent.emitter.emit.apply(parent.emitter, arguments)
         parent.vm.$emit.apply(parent.vm, arguments)
diff --git a/test/functional/fixtures/nested-props.html b/test/functional/fixtures/nested-props.html
diff --git a/test/functional/fixtures/transition.html b/test/functional/fixtures/transition.html
diff --git a/test/functional/specs/nested-props.js b/test/functional/specs/nested-props.js
