Evan You 13 лет назад
Родитель
Сommit
5ce3b82b91
3 измененных файлов с 64 добавлено и 56 удалено
  1. 18 19
      dev.html
  2. 32 27
      src/main.js
  3. 14 10
      src/seed.js

+ 18 - 19
dev.html

@@ -11,7 +11,7 @@
 		</style>
 	</head>
 	<body>
-		<div sd-seed="test" sd-on-click="changeMessage | delegate .button">
+		<div id="test" sd-on-click="changeMessage | delegate .button">
             <p sd-text="msg.wow | capitalize" sd-on-click="remove"></p>
             <p sd-text="msg.wow | uppercase" class="button"></p>
             <p sd-text="total | money"></p>
@@ -28,22 +28,8 @@
 			})
 
 			// define a seed
-			Seed.seed('test', {
-				// data
-		    	total 	  : 1000,
-		        'msg.wow' : 'wow',
-		        hello 	  : 'hello',
-		        todos     : [
-		        	{
-		        		title: 'make this shit work',
-		        		done: false
-		        	},
-		        	{
-		        		title: 'make this shit kinda work',
-		        		done: true
-		        	}
-		        ],
-		        // handlers
+			var Todos = Seed.extend({
+                id: 0,
 		        changeMessage: function () {
 		            this.scope['msg.wow'] = 'hola'
 		        },
@@ -52,8 +38,21 @@
 		        }
 		    })
 
-			// boots everything
-		    Seed.plant()
+			var todos = new Todos('#test', {
+                total     : 1000,
+                'msg.wow' : 'wow',
+                hello     : 'hello',
+                todos     : [
+                    {
+                        title: 'make this shit work',
+                        done: false
+                    },
+                    {
+                        title: 'make this shit kinda work',
+                        done: true
+                    }
+                ]
+            })
 
 		</script>
 	</body>

+ 32 - 27
src/main.js

@@ -3,35 +3,40 @@ var config     = require('./config'),
     directives = require('./directives'),
     filters    = require('./filters')
 
-var seeds = {}
-
 function buildSelector () {
-    config.selector = Object.keys(module.exports).forEach(function (directive) {
-    
-    })
+    config.selector = Object.keys(directives).map(function (directive) {
+        return '[' + config.prefix + '-' + directive + ']'
+    }).join()
 }
 
-module.exports = {
-    seeds: seeds,
-    seed: function (id, opts) {
-        seeds[id] = opts
-    },
-    directive: function (name, fn) {
-        Directives[name] = fn
-    },
-    filter: function (name, fn) {
-        Filters[name] = fn
-    },
-    config: function (opts) {
-        for (var prop in opts) {
-            if (prop !== 'selector') {
-                config[prop] = opts[prop]
-            }
-        }
-    },
-    plant: function () {
-        for (var id in seeds) {
-            seeds[id] = new Seed(id, seeds[id])
+Seed.config = config
+buildSelector()
+
+Seed.extend = function (opts) {
+    var Spore = function () {
+        Seed.apply(this, arguments)
+        for (var prop in this.extensions) {
+            var ext = this.extensions[prop]
+            this.scope[prop] = (typeof ext === 'function')
+                ? ext.bind(this)
+                : ext
         }
     }
-}
+    Spore.prototype = Object.create(Seed.prototype)
+    Spore.prototype.extensions = {}
+    for (var prop in opts) {
+        Spore.prototype.extensions[prop] = opts[prop]
+    }
+    return Spore
+}
+
+Seed.directive = function (name, fn) {
+    directives[name] = fn
+    buildSelector()
+}
+
+Seed.filter = function (name, fn) {
+    filters[name] = fn
+}
+
+module.exports = Seed

+ 14 - 10
src/seed.js

@@ -3,22 +3,24 @@ var config      = require('./config'),
     Directives  = require('./directives'),
     Filters     = require('./filters')
 
-function Seed (opts) {
+function Seed (el, data) {
 
-    var self = this,
-        root = this.el = document.getElementById(opts.id),
-        els  = root.querySelectorAll(config.selector)
+    if (typeof el === 'string') {
+        el = document.querySelector(el)
+    }
 
-    self._bindings = {}
-    self.scope = {}
+    this.el         = el
+    this._bindings  = {}
+    this.scope      = {}
 
     // process nodes for directives
+    var els  = el.querySelectorAll(config.selector)
     ;[].forEach.call(els, this._compileNode.bind(this))
-    this._compileNode(root)
+    this._compileNode(el)
 
     // initialize all variables by invoking setters
-    for (var key in self._bindings) {
-        self.scope[key] = opts.scope[key]
+    for (var key in this._bindings) {
+        this.scope[key] = data[key]
     }
 
 }
@@ -104,4 +106,6 @@ function cloneAttributes (attributes) {
             value: attr.value
         }
     })
-}
+}
+
+module.exports = Seed