chinese readme

README.md

@@ -3,7 +3,7 @@
 
 - 5kb gzipped!
 - DOM based templates with precise and efficient manipulation
-- POJSO (Plain Old JavaScript Objects) FTW.
+- POJSO (Plain Old JavaScript Objects) Models FTW.
 - Auto dependency extraction for computed properties.
 - Auto event delegation on repeated items.
 - Component based, but can also be used alone.

README_Chinese.md

@@ -0,0 +1,11 @@
+# Seed
+## 迷你MVVM框架
+
+- gzip后5kb大小
+- 基于DOM的动态模版，精确到TextNode的DOM操作
+- 管道过滤函数 (filter piping)
+- Model就是原生JS对象，不需要繁琐的get()或set()。操作对象自动更新DOM
+- 自动抓取需要计算的属性 (computed properties) 的依赖
+- 在数组重复的元素上添加listener的时候自动代理事件 (event delegation)
+- 基于Component，遵循CommonJS模块标准，也可独立使用
+- 移除时自动解绑所有listener

examples/todos/app.js

@@ -1,10 +1,9 @@
 var Seed = require('seed')
 
 var todos = [
-    { text: 'make nesting controllers work', done: true },
+    { text: 'make nesting Objects work', done: false },
-    { text: 'complete ArrayWatcher', done: true },
+    { text: 'auto dependency extraction', done: true },
-    { text: 'computed properties', done: true },
+    { text: 'computed properties', done: true }
-    { text: 'parse textnodes', done: false }
 ]
 
 Seed.controller('Todos', function (scope) {
@@ -35,13 +34,12 @@ Seed.controller('Todos', function (scope) {
 
     // event handlers ---------------------------------------------------------
     scope.addTodo = function (e) {
-        var val = e.el.value
+        if (e.el.value) {
-        if (val) {
+            scope.todos.unshift({ text: e.el.value })
             e.el.value = ''
-            scope.todos.unshift({ text: val, done: false })
-        }
             scope.remaining++
         }
+    }
 
     scope.removeTodo = function (e) {
         scope.todos.remove(e.scope)
@@ -79,8 +77,4 @@ Seed.controller('Todos', function (scope) {
 
 })
 
-var s = Date.now()
-
 Seed.bootstrap()
-
-console.log(Date.now() - s)

src/directive.js

@@ -16,15 +16,17 @@ var KEY_RE          = /^[^\|<]+/,
  */
 function Directive (directiveName, expression, oneway) {
 
-    var prop, directive = directives[directiveName]
+    var prop,
-    if (typeof directive === 'function') {
+        definition = directives[directiveName]
-        this._update = directive
+
+    // mix in properties from the directive definition
+    if (typeof definition === 'function') {
+        this._update = definition
     } else {
-        for (prop in directive) {
+        this._update = definition.update
-            if (prop === 'update') {
+        for (prop in definition) {
-                this['_update'] = directive.update
+            if (prop !== 'update') {
-            } else {
+                this[prop] = definition[prop]
-                this[prop] = directive[prop]
             }
         }
     }
@@ -67,7 +69,7 @@ Directive.prototype.update = function (value) {
     if (value && (value === this.value)) return
     this.value = value
     // computed property
-    if (typeof value === 'function' && !this.fn) {
+    if (typeof value === 'function' && !this.expectFunction) {
         value = value()
     }
     if (this.inverse) value = !value

src/directives/index.js

@@ -1,13 +1,3 @@
-var CONVERT_RE = /-(.)/g,
-    converter  = function (m, char) {
-        return char.toUpperCase()
-    }
-    
-function convertCSSProperty (prop) {
-    if (prop.charAt(0) === '-') prop = prop.slice(1)
-    return prop.replace(CONVERT_RE, converter)
-}
-
 module.exports = {
 
     on    : require('./on'),
@@ -122,3 +112,14 @@ module.exports = {
         }
     }
 }
+
+/*
+ *  convert hyphen style CSS property to Camel style
+ */
+var CONVERT_RE = /-(.)/g
+function convertCSSProperty (prop) {
+    if (prop.charAt(0) === '-') prop = prop.slice(1)
+    return prop.replace(CONVERT_RE, function (m, char) {
+        return char.toUpperCase()
+    })
+}

src/directives/on.js

@@ -10,7 +10,7 @@ function delegateCheck (current, top, marker) {
 
 module.exports = {
 
-    fn : true,
+    expectFunction : true,
 
     bind: function () {
         if (this.seed.each) {
@@ -24,9 +24,9 @@ module.exports = {
         if (!handler) return
         var self  = this,
             event = this.arg
-        if (this.seed.each && event !== 'blur') {
+        if (this.seed.each && event !== 'blur' && event !== 'blur') {
             // for each blocks, delegate for better performance
-            // blur events dont bubble so exclude them
+            // focus and blur events dont bubble so exclude them
             var delegator = this.seed.delegator
             if (!delegator) return
             var marker    = this.expression,
@@ -61,9 +61,6 @@ module.exports = {
     },
 
     unbind: function () {
-        var event = this.arg
+        this.el.removeEventListener(this.arg, this.handler)
-        if (this.handler) {
-            this.el.removeEventListener(event, this.handler)
-        }
     }
 }

src/seed.js

@@ -46,6 +46,7 @@ function Seed (el, options) {
 
     // initialize the scope object
     var scope = this.scope = {}
+
     scope.$el       = el
     scope.$seed     = this
     scope.$destroy  = this._destroy.bind(this)
@@ -64,7 +65,7 @@ function Seed (el, options) {
         el.removeAttribute(ctrlAttr)
         var factory = config.controllers[ctrlID]
         if (factory) {
-            factory.call(this, this.scope)
+            factory(this.scope)
         } else {
             console.warn('controller ' + ctrlID + ' is not defined.')
         }