rename `prop` option to `scope`

TODO.md

@@ -1,4 +1,4 @@
-- put all API methods on Seed
+- Array.replace should not do anything if array is empty
 - add a method to observe additional data properties
 - add `lazy` option
 - add directive for all form elements, and make it consistent as `sd-model`

examples/encapsulation.html

@@ -22,7 +22,7 @@
             })
             new T({
                 el: '#test',
-                data: {
+                scope: {
                     hi: 'ho43h132oh5o12345'
                 }
             })

examples/expression.html

@@ -14,7 +14,7 @@
             Seed.config({ debug: true })
             var demo = new Seed({
                 el: '#demo',
-                data: {
+                scope: {
                     one: 'Hello',
                     two: 'World'
                 }

examples/nested-props.html

@@ -53,7 +53,7 @@
             var app = new Demo({ el: '#a' }),
                 app2 = new Seed({
                     el: '#b',
-                    data: {
+                    scope: {
                         a: data
                     }
                 })

examples/repeated-items.html

@@ -37,7 +37,7 @@
 
             var demo = new Seed({
                 el: '#app',
-                data: {
+                scope: {
                     items: items,
                     push: function () {
                         this.items.push({ title: randomChar() })

examples/share-data.html

@@ -20,25 +20,25 @@
             }
             new Seed({
                 el: '#a',
-                data: {
+                scope: {
                     shared: shared
                 }
             })
             new Seed({
                 el: '#b',
-                data: {
+                scope: {
                     shared: shared
                 }
             })
             new Seed({
                 el: '#c',
-                data: {
+                scope: {
                     shared: shared
                 }
             })
             new Seed({
                 el: '#d',
-                data: {
+                scope: {
                     shared: shared,
                     source: {
                         get: function () {

examples/todomvc/js/app.js

@@ -13,7 +13,7 @@ var app = new Seed({
         this.updateFilter()
     },
 
-    data: {
+    scope: {
 
         todos: todoStorage.fetch(),
 

src/compiler.js

@@ -31,9 +31,9 @@ function Compiler (vm, options) {
     compiler.setupElement(options)
     utils.log('\nnew VM instance: ', compiler.el, '\n')
 
-    // copy data to vm
-    var data = options.data
-    if (data) utils.extend(vm, data)
+    // copy scope properties to vm
+    var scope = options.scope
+    if (scope) utils.extend(vm, scope)
 
     compiler.vm  = vm
     vm.$compiler = compiler

src/directives/repeat.js

@@ -141,11 +141,11 @@ module.exports = {
             ctn  = this.container,
             vmID = node.getAttribute(config.prefix + '-viewmodel'),
             ChildVM = this.compiler.getOption('vms', vmID) || ViewModel,
-            wrappedData = {}
-        wrappedData[this.arg] = data || {}
+            scope = {}
+        scope[this.arg] = data || {}
         var item = new ChildVM({
             el: node,
-            data: wrappedData,
+            scope: scope,
             compilerOptions: {
                 repeat: true,
                 repeatIndex: index,

src/main.js

@@ -95,7 +95,7 @@ function extend (options) {
 /*
  *  Inherit options
  *
- *  For options such as `data`, `vms`, `directives`, 'partials',
+ *  For options such as `scope`, `vms`, `directives`, 'partials',
  *  they should be further extended. However extending should only
  *  be done at top level.
  *  

test/unit/specs/api.js

@@ -10,7 +10,7 @@ describe('UNIT: API', function () {
             mock(testId, '<span test-text="test"></span>')
             new Seed({
                 el: '#' + testId,
-                data: { test: testId }
+                scope: { test: testId }
             })
             assert.strictEqual($('#' + testId + ' span'), testId)
         })
@@ -26,7 +26,7 @@ describe('UNIT: API', function () {
             mock(testId, '<% test %>')
             new Seed({
                 el: '#' + testId,
-                data: { test: testId }
+                scope: { test: testId }
             })
             assert.strictEqual($('#' + testId), testId)
         })
@@ -56,7 +56,7 @@ describe('UNIT: API', function () {
             mock(testId, '{{ test | reverse }}')
             new Seed({
                 el: '#' + testId,
-                data: { test: msg }
+                scope: { test: msg }
             })
             assert.strictEqual($('#' + testId), '54321')
         })
@@ -81,7 +81,7 @@ describe('UNIT: API', function () {
             mock(testId, '<span sd-test="test"></span>')
             new Seed({
                 el: '#' + testId,
-                data: { test: msg }
+                scope: { test: msg }
             })
             var el = document.querySelector('#' + testId + ' span')
             assert.strictEqual(el.getAttribute(testId), msg + '123')
@@ -105,7 +105,7 @@ describe('UNIT: API', function () {
             mock(testId, '<span sd-test2="test"></span>')
             var vm = new Seed({
                     el: '#' + testId,
-                    data: { test: msg }
+                    scope: { test: msg }
                 }),
                 el = document.querySelector('#' + testId + ' span')
             assert.strictEqual(el.getAttribute(testId + 'bind'), msg + 'bind', 'should have called bind()')
@@ -126,7 +126,7 @@ describe('UNIT: API', function () {
         var testId = 'api-vm-test',
             Test = Seed.extend({
                 className: 'hihi',
-                data: { hi: 'ok' }
+                scope: { hi: 'ok' }
             }),
             utils = require('seed/src/utils')
 
@@ -173,7 +173,7 @@ describe('UNIT: API', function () {
             mock(testId, '<div class="directive" sd-partial="' + testId + '">hello</div>')
             var t = new Seed({
                 el: '#' + testId,
-                data: { hi: 'hohoho' }
+                scope: { hi: 'hohoho' }
             })
             assert.strictEqual(t.$el.querySelector('.directive .partial-test a').textContent, 'hohoho')
             assert.strictEqual(t.$el.querySelector('.directive span').innerHTML, 'hahaha')
@@ -185,7 +185,7 @@ describe('UNIT: API', function () {
             mock(testId, '<div class="inline">{{>' + testId + '}}</div>')
             var t = new Seed({
                 el: '#' + testId,
-                data: { hi: 'hohoho' }
+                scope: { hi: 'hohoho' }
             })
             assert.strictEqual(t.$el.querySelector('.inline .partial-test a').textContent, 'hohoho')
             assert.strictEqual(t.$el.querySelector('.inline span').innerHTML, 'hahaha')
@@ -222,12 +222,12 @@ describe('UNIT: API', function () {
 
         it('should allow further extensions', function () {
             var Parent = Seed.extend({
-                data: {
+                scope: {
                     test: 'hi'
                 }
             })
             var Child = Parent.extend({
-                data: {
+                scope: {
                     test2: 'ho',
                     test3: {
                         hi: 1
@@ -236,7 +236,7 @@ describe('UNIT: API', function () {
             })
             assert.strictEqual(Child.super, Parent)
             var child = new Child({
-                data: {
+                scope: {
                     test3: {
                         ho: 2
                     }
@@ -280,12 +280,12 @@ describe('UNIT: API', function () {
 
             })
 
-            describe('data', function () {
+            describe('scope', function () {
                 
                 it('should be copied to each instance', function () {
                     var testData = { a: 1 },
                         Test = Seed.extend({
-                            data: {
+                            scope: {
                                 test: testData
                             }
                         })
@@ -317,7 +317,7 @@ describe('UNIT: API', function () {
                             'test': 'hi',
                             'sd-text': 'hoho'
                         },
-                        data: {
+                        scope: {
                             hoho: 'what'
                         }
                     })
@@ -339,7 +339,7 @@ describe('UNIT: API', function () {
                                 'test': 'hi',
                                 'sd-text': 'hoho'
                             },
-                            data: {
+                            scope: {
                                 hoho: 'what'
                             }
                         }),
@@ -364,7 +364,7 @@ describe('UNIT: API', function () {
                     var Test = Seed.extend({
                             tagName: 'p',
                             template: raw,
-                            data: {
+                            scope: {
                                 hello: 'Ahaha'
                             }
                         }),
@@ -385,7 +385,7 @@ describe('UNIT: API', function () {
                     document.getElementById('test').appendChild(tpl)
                     var Test = Seed.extend({
                         template: '#' + testId,
-                        data: { hello: testId }
+                        scope: { hello: testId }
                     })
                     var t = new Test()
                     assert.strictEqual(t.$el.querySelector('span').textContent, testId)
@@ -397,7 +397,7 @@ describe('UNIT: API', function () {
                     })
                     var t = new Test({
                         template: raw,
-                        data: {
+                        scope: {
                             hello: 'overwritten!'
                         }
                     })
@@ -420,7 +420,7 @@ describe('UNIT: API', function () {
                         attributes: {
                             'sd-test': 'ok'
                         },
-                        data: {
+                        scope: {
                             ok: true
                         }
                     })
@@ -443,7 +443,7 @@ describe('UNIT: API', function () {
                     })
                     var t = new Test({
                         template: '{{hi | test}}',
-                        data: {
+                        scope: {
                             hi: 'hohoho'
                         }
                     })
@@ -456,13 +456,13 @@ describe('UNIT: API', function () {
 
                 it('should allow the VM to use private child VMs', function () {
                     var Child = Seed.extend({
-                        data: {
+                        scope: {
                             name: 'child'
                         }
                     })
                     var Parent = Seed.extend({
                         template: '<p>{{name}}</p><div sd-viewmodel="child">{{name}}</div>',
-                        data: {
+                        scope: {
                             name: 'dad'
                         },
                         vms: {
@@ -486,7 +486,7 @@ describe('UNIT: API', function () {
                         partials: {
                             test: '<a>{{a}}</a><p>{{b}}</p>'
                         },
-                        data: {
+                        scope: {
                             a: 'hi',
                             b: 'ho'
                         }

test/unit/specs/viewmodel.js

@@ -19,7 +19,7 @@ describe('UNIT: ViewModel', function () {
         arr = [1, 2, 3],
         vm = new Seed({
             el: '#vm-test',
-            data: {
+            scope: {
                 a: data,
                 b: arr
             }