Evan You 13 лет назад
Родитель
Сommit
6f0eca4bf6

+ 1 - 1
examples/nested-props.html

@@ -14,7 +14,7 @@
         <button sd-on="click:three">three</button>
         <script>
             var Demo = Seed.ViewModel.extend({
-                properties: {
+                props: {
                     one: function () {
                         this.a = {
                             c: 1,

+ 41 - 33
examples/nested-viewmodels.html

@@ -3,20 +3,48 @@
 <head>
     <title>Nested Controllers</title>
     <style type="text/css">
-        div {
-            padding-left: 10px;
+        div:not(#grandpa) {
+            padding-left: 15px;
+        }
+        p:not(.ancestor):before {
+            content: "└ ";
         }
     </style>
     <script src="../dist/seed.js"></script>
 </head>
 <body>
-    <div id="grandpa">
-        <p sd-text="name"></p>
-        <div sd-viewmodel="Dad">
+    <div id="grandpa" data-name="Andy">
+        <p class="ancestor" sd-text="name"></p>
+
+        <div sd-viewmodel="man" data-name="Jack">
             <p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
-            <div sd-viewmodel="Son">
-                <p><span sd-text="name"></span>,son of <span sd-text="^name"></span></p>
-                <div sd-viewmodel="Baby">
+
+            <div sd-viewmodel="man" data-name="Mike">
+                <p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
+
+                <div sd-viewmodel="man" data-name="Tim">
+                    <p>
+                        <span sd-text="name"></span>,
+                        son of <span sd-text="^name"></span>,
+                        grandson of <span sd-text="^^name"></span>
+                        and great-grandson of <span sd-text="$name"></span>
+                    </p>
+                </div>
+
+                <div sd-viewmodel="man" data-name="Tom">
+                    <p>
+                        <span sd-text="name"></span>,
+                        son of <span sd-text="^name"></span>,
+                        grandson of <span sd-text="^^name"></span>
+                        and great-grandson of <span sd-text="$name"></span>
+                    </p>
+                </div>
+            </div>
+
+            <div sd-viewmodel="man" data-name="Jason">
+                <p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
+
+                <div sd-viewmodel="man" data-name="Andrew">
                     <p>
                         <span sd-text="name"></span>,
                         son of <span sd-text="^name"></span>,
@@ -33,34 +61,14 @@
             debug: true
         })
 
-        var Grandpa = Seed.ViewModel.extend({
-            properties: {
-                name: 'Andy'
-            }
-        })
-
-        var Dad = Seed.ViewModel.extend({
-            id: 'Dad',
-            properties: {
-                name: 'Jack'
-            }
-        })
-
-        var Son = Seed.ViewModel.extend({
-            id: 'Son',
-            properties: {
-                name: 'Mike'
-            }
-        })
-
-        var Baby = Seed.ViewModel.extend({
-            id: 'Baby',
-            properties: {
-                name: 'Tim'
+        var Man = Seed.ViewModel.extend({
+            id: 'man',
+            init: function () {
+                this.name = this.$el.dataset.name
             }
         })
 
-        var demo = new Grandpa({ el: '#grandpa' })
+        var demo = new Man({ el: '#grandpa' })
 
     </script>
 </body>

+ 0 - 26
examples/new-api-test.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title></title>
-        <meta charset="utf-8">
-        <script src="../dist/seed.js"></script>
-    </head>
-    <body>
-        <div sd-template="todo" sd-text="hi" sd-on="click:hello"></div>
-        <script>
-            var Test = Seed.ViewModel.extend({
-                template: 'todo',
-                initialize: function (msg) {
-                    this.hi = 'Aloha'
-                },
-                properties: {
-                    hello: function () {
-                        console.log('Aloha')
-                    }
-                }
-            })
-            var app = new Test()
-            document.body.appendChild(app.$el)
-        </script>
-    </body>
-</html>

+ 27 - 0
examples/template.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title></title>
+        <meta charset="utf-8">
+        <script src="../dist/seed.js"></script>
+    </head>
+    <body>
+        <div sd-template="todo">
+            <p>{{hi}}!</p>
+        </div>
+        <script>
+            var Test = Seed.ViewModel.extend({
+                template: 'todo',
+                init: function (msg) {
+                    this.hi = msg
+                }
+            })
+
+            var hawaii = new Test({ args: ['Aloha'] }),
+                china  = new Test({ args: ['你好'] })
+
+            document.body.appendChild(hawaii.$el)
+            document.body.appendChild(china.$el)
+        </script>
+    </body>
+</html>

+ 2 - 2
examples/todomvc/js/app.js

@@ -6,13 +6,13 @@ var filters = {
 
 var Todos = Seed.ViewModel.extend({
 
-    initialize: function () {
+    init: function () {
         this.todos = todoStorage.fetch()
         this.remaining = this.todos.filter(filters.active).length
         this.updateFilter()
     },
 
-    properties: {
+    props: {
 
         updateFilter: function () {
             var filter = location.hash.slice(2)

+ 2 - 2
src/compiler.js

@@ -51,8 +51,8 @@ function Compiler (vm, options) {
     }
 
     // call user init
-    if (options.initialize) {
-        options.initialize.apply(vm, options.args || [])
+    if (options.init) {
+        options.init.apply(vm, options.args || [])
     }
 
     // now parse the DOM

+ 5 - 5
src/main.js

@@ -60,16 +60,16 @@ ViewModel.extend = function (options) {
         if (options.template) {
             opts.template = utils.getTemplate(options.template)
         }
-        if (options.initialize) {
-            opts.initialize = options.initialize
+        if (options.init) {
+            opts.init = options.init
         }
         ViewModel.call(this, opts)
     }
     var p = ExtendedVM.prototype = Object.create(ViewModel.prototype)
     p.constructor = ExtendedVM
-    if (options.properties) {
-        for (var prop in options.properties) {
-            p[prop] = options.properties[prop]
+    if (options.props) {
+        for (var prop in options.props) {
+            p[prop] = options.props[prop]
         }
     }
     if (options.id) {