add firebase example

yyx990803 · yyx990803 · commit 15bee32085dd · 2014-09-23T21:06:32.000-04:00
diff --git a/examples/firebase/app.js b/examples/firebase/app.js
@@ -0,0 +1,93 @@
+var baseURL = 'https://vue-demo.firebaseio.com/'
+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,}))$/
+
+/**
+ * Setup firebase sync
+ */
+
+var 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
+    }
+  })
+})
+
+/**
+ * Create Vue app
+ */
+
+var app = new Vue({
+
+  // element to mount to
+  el: '#app',
+
+  // initial data
+  data: {
+    users: [],
+    newUser: {
+      name: '',
+      email: ''
+    },
+    validation: {
+      name: false,
+      email: false
+    }
+  },
+
+  // validation filters are "write only" filters
+  filters: {
+    nameValidator: {
+      write: function (val) {
+        this.validation.name = !!val
+        return val
+      }
+    },
+    emailValidator: {
+      write: function (val) {
+        this.validation.email = emailRE.test(val)
+        return val
+      }
+    }
+  },
+
+  // computed property for form validation state
+  computed: {
+    isValid: function () {
+      var valid = true
+      for (var key in this.validation) {
+        if (!this.validation[key]) {
+          valid = false
+        }
+      }
+      return valid
+    }
+  },
+  
+  // methods
+  methods: {
+    addUser: function (e) {
+      e.preventDefault()
+      if (this.isValid) {
+        Users.push(this.newUser)
+        this.newUser = {
+          name: '',
+          email: ''
+        }
+      }
+    },
+    removeUser: function (user) {
+      new Firebase(baseURL + 'users/' + user.id).remove()
+    }
+  }
+})
diff --git a/examples/firebase/index.html b/examples/firebase/index.html
@@ -0,0 +1,30 @@
+<!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/js/client/1.0.23/firebase.js'></script>
+    <script src="../../dist/vue.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <ul>
+        <li class="user" v-repeat="users" v-transition>
+          <span>{{name}} - {{email}}</span>
+          <button v-on="click:removeUser(this)">X</button>
+        </li>
+      </ul>
+      <form id="form" v-on="submit:addUser">
+        <input v-model="newUser.name | nameValidator | capitalize">
+        <input v-model="newUser.email | emailValidator">
+        <input type="submit" value="Add User">
+      </form>
+      <ul class="errors">
+        <li v-show="!validation.name">Name cannot be empty.</li>
+        <li v-show="!validation.email">Please provide a valid email address.</li>
+      </ul>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/examples/firebase/style.css b/examples/firebase/style.css
@@ -0,0 +1,28 @@
+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;
+}
+
+.v-enter, .v-leave {
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-top-width: 0;
+  border-bottom-width: 0;
+}
+
+.errors {
+  color: #f00;
+}
