Home Explore Help
Register Sign In
vuejs
/
vue
mirror of https://github.com/vuejs/vue.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

add simple example & manual refresh of computed properties

Evan You 13 years ago
parent
f6d6bba70d
commit
67ff344810
6 changed files with 46 additions and 25 deletions
Unified View Show Diff Stats
  1. 3 1
      TODO.md
  2. 18 0
      examples/simple.html
  3. 9 15
      examples/todos/app.js
  4. 1 5
      src/directives/index.js
  5. 3 2
      src/main.js
  6. 12 2
      src/seed.js

+ 3 - 1
TODO.md
View File 

@@ -5,5 +5,7 @@
 
 - parse textNodes?
 
 - parse textNodes?
 
 - more directives / filters
 
 - more directives / filters
 
     - sd-if
 
     - sd-if
 
-    - sd-route
 
+    - sd-with
 
+    - sd-visible
 
+    - sd-style
 
 - nested properties in scope (kinda hard, maybe later)
 
 - nested properties in scope (kinda hard, maybe later)

+ 18 - 0
examples/simple.html
View File 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <title>Simple Example</title>
 
+        <meta charset="utf-8">
 
+        <script src="../dist/seed.js"></script>
 
+    </head>
 
+    <body sd-controller="hello">
 
+        <span sd-text="hello"></span>
 
+        <script>
 
+            var Seed = require('seed')
 
+            Seed.controller('hello', function (scope) {
 
+                scope.hello = 'Hello World!'
 
+            })
 
+            Seed.bootstrap()
 
+        </script>
 
+    </body>
 
+</html>

+ 9 - 15
examples/todos/app.js
View File 

@@ -18,23 +18,17 @@ Seed.controller('Todos', function (scope) {
 
     scope.allDone = scope.remaining === 0
 
     scope.allDone = scope.remaining === 0
 
 
 
     // computed properties ----------------------------------------------------
 
     // computed properties ----------------------------------------------------
 
-    scope.total = {
 
-        get: function () {
 
-            return scope.todos.length
 
-        }
 
-    }
 
+    scope.total = {get: function () {
 
+        return scope.todos.length
 
+    }}
 
 
 
-    scope.completed = {
 
-        get: function () {
 
-            return scope.total() - scope.remaining
 
-        }
 
-    }
 
+    scope.completed = {get: function () {
 
+        return scope.total() - scope.remaining
 
+    }}
 
 
 
-    scope.itemLabel = {
 
-        get: function () {
 
-            return scope.remaining > 1 ? 'items' : 'item'
 
-        }
 
-    }
 
+    scope.itemLabel = {get: function () {
 
+        return scope.remaining > 1 ? 'items' : 'item'
 
+    }}
 
 
 
     // event handlers ---------------------------------------------------------
 
     // event handlers ---------------------------------------------------------
 
     scope.addTodo = function (e) {
 
     scope.addTodo = function (e) {

+ 1 - 5
src/directives/index.js
View File 

@@ -12,11 +12,7 @@ module.exports = {
 
     show: function (value) {
 
     show: function (value) {
 
         this.el.style.display = value ? '' : 'none'
 
         this.el.style.display = value ? '' : 'none'
 
     },
 
     },
 
-
 
-    hide: function (value) {
 
-        this.el.style.display = value ? 'none' : ''
 
-    },
 
-
 
+    
     focus: function (value) {
 
     focus: function (value) {
 
         this.el[value ? 'focus' : 'blur']()
 
         this.el[value ? 'focus' : 'blur']()
 
     },
 
     },

+ 3 - 2
src/main.js
View File 

@@ -40,9 +40,10 @@ api.bootstrap = function (opts) {
 
         config.prefix = opts.prefix || config.prefix
 
         config.prefix = opts.prefix || config.prefix
 
     }
 
     }
 
     var app = {}, n = 0, el, seed,
 
     var app = {}, n = 0, el, seed,
 
-        selector = '[' + config.prefix + '-controller]'
 
+        ctrlSlt = '[' + config.prefix + '-controller]',
 
+        dataSlt = '[' + config.prefix + '-data]'
 
     /* jshint boss: true */
 
     /* jshint boss: true */
 
-    while (el = document.querySelector(selector)) {
 
+    while (el = document.querySelector(ctrlSlt) || document.querySelector(dataSlt)) {
 
         seed = new Seed(el)
 
         seed = new Seed(el)
 
         if (el.id) {
 
         if (el.id) {
 
             app['$' + el.id] = seed
 
             app['$' + el.id] = seed

+ 12 - 2
src/seed.js
View File 

@@ -42,6 +42,7 @@ function Seed (el, options) {
 
     scope.$dump     = this._dump.bind(this)
 
     scope.$dump     = this._dump.bind(this)
 
     scope.$index    = options.index
 
     scope.$index    = options.index
 
     scope.$parent   = options.parentSeed && options.parentSeed.scope
 
     scope.$parent   = options.parentSeed && options.parentSeed.scope
 
+    scope.$refresh  = this._refreshBinding.bind(this)
 
 
 
     // update bindings when a property is set
 
     // update bindings when a property is set
 
     this.on('set', this._updateBinding.bind(this))
 
     this.on('set', this._updateBinding.bind(this))
 
@@ -214,9 +215,11 @@ Seed.prototype._updateBinding = function (key, value) {
 
         if (value.get) { // computed property
 
         if (value.get) { // computed property
 
             type = 'Computed'
 
             type = 'Computed'
 
             value = value.get
 
             value = value.get
 
+        } else { // normal object
 
+            // TODO watchObject
 
         }
 
         }
 
     } else if (type === 'Array') {
 
     } else if (type === 'Array') {
 
-        augmentArray(value)
 
+        watchArray(value)
 
         value.on('mutate', function () {
 
         value.on('mutate', function () {
 
             if (binding.dependents) {
 
             if (binding.dependents) {
 
                 binding.refreshDependents()
 
                 binding.refreshDependents()
 
@@ -240,6 +243,13 @@ Seed.prototype._updateBinding = function (key, value) {
 
 
 
 }
 
 }
 
 
 
+Seed.prototype._refreshBinding = function (key) {
 
+    var binding = this._bindings[key]
 
+    binding.instances.forEach(function (instance) {
 
+        instance.refresh()
 
+    })
 
+}
 
+
 
 Seed.prototype._unbind = function () {
 
 Seed.prototype._unbind = function () {
 
     var unbind = function (instance) {
 
     var unbind = function (instance) {
 
         if (instance.unbind) {
 
         if (instance.unbind) {
 
@@ -316,7 +326,7 @@ var arrayAugmentations = {
 
         this.splice(index, 1, data)
 
         this.splice(index, 1, data)
 
     }
 
     }
 
 }
 
 }
 
-function augmentArray (collection) {
 
+function watchArray (collection) {
 
     Emitter(collection)
 
     Emitter(collection)
 
     arrayMutators.forEach(function (method) {
 
     arrayMutators.forEach(function (method) {
 
         collection[method] = function () {
 
         collection[method] = function () {