首頁 探索 說明
註冊 登入
oleg
/
spruce
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Merge pull request #89 from ryangjchandler/fix/array-watchers

fix: array watchers
Ryan Chandler 4 年之前
父節點
72978b2778 342423525c
當前提交
3959a02cab
共有 11 個文件被更改，包括 69 次插入 和 5 次删除
分割檢視 顯示文件統計
  1. 0 0
      dist/spruce.js
  2. 0 0
      dist/spruce.js.map
  3. 0 0
      dist/spruce.module.js
  4. 0 0
      dist/spruce.module.js.map
  5. 0 0
      dist/spruce.umd.js
  6. 0 0
      dist/spruce.umd.js.map
  7. 25 0
      examples/index.html
  8. 2 0
      src/index.js
  9. 4 0
      src/observable.js
  10. 27 2
      tests/cypress/fixtures/watchers/init.html
  11. 11 3
      tests/cypress/integration/watchers.spec.js

文件差異過大導致無法顯示
+ 0 - 0
dist/spruce.js


文件差異過大導致無法顯示
+ 0 - 0
dist/spruce.js.map


文件差異過大導致無法顯示
+ 0 - 0
dist/spruce.module.js


文件差異過大導致無法顯示
+ 0 - 0
dist/spruce.module.js.map


文件差異過大導致無法顯示
+ 0 - 0
dist/spruce.umd.js


文件差異過大導致無法顯示
+ 0 - 0
dist/spruce.umd.js.map


+ 25 - 0
examples/index.html
查看文件 

@@ -26,6 +26,19 @@
 
             <p x-text="$store.colorScheme"></p>
 
         </div>
 
 
+        <div x-data>
 
+            <input type="text" x-model="$store.todo.new">
 
+            <button @click="$store.todo.add($store.todo.new)">
 
+                Add Todo
 
+            </button>
 
+
 
+            <ul>
 
+                <template x-for="todo in $store.todo.todos">
 
+                    <li x-text="todo"></li>
 
+                </template>
 
+            </ul>
 
+        </div>
 
+
 
         <script src="../dist/spruce.umd.js"></script>
 
 
         <script>
 
@@ -45,6 +58,14 @@
 
 
             Spruce.store('colorScheme', 'light', true)
 
 
+            Spruce.store('todo', {
 
+                new: '',
 
+                todos: [],
 
+                add(todo) {
 
+                    this.todos.push(todo)
 
+                }
 
+            })
 
+
 
             Spruce.watch('application.name', () => {
 
                 Spruce.store('persisted').example = 'World';
 
             });
 
@@ -60,6 +81,10 @@
 
             Spruce.started(function () {
 
                 console.log('started...')
 
             })
 
+
 
+            Spruce.watch('todo.todos', function () {
 
+                console.log('Added todo')
 
+            })
 
         </script>
 
     </body>
 
 </html>

+ 2 - 0
src/index.js
查看文件 

@@ -141,6 +141,8 @@ const Spruce = {
 
     },
 
 
     runWatchers(stores, target, key, value) {
 
+        key = target['__key_name'] || key
 
+
 
         const self = this
 
 
         if (self.watchers[key]) {

+ 4 - 0
src/observable.js
查看文件 

@@ -3,6 +3,10 @@ import { isNullOrUndefined, isObject, isArray } from './utils'
 
 export const createObservable = (target, callbacks) => {
 
     Object.entries(target).forEach(([key, value]) => {
 
         if (! isNullOrUndefined(value) && (isObject(value) || isArray(value))) {
 
+            if (isArray(value)) {
 
+                value['__key_name'] = key
 
+            }
 
+            
             target[key] = createObservable(value, callbacks)
 
         }
 
     })

+ 27 - 2
tests/cypress/fixtures/watchers/init.html
查看文件 

@@ -4,17 +4,42 @@
 
     </head>
 
     <body>
 
         <p x-data x-text="$store.persisted.foo"></p>
 
-        <button x-data @click="$store.persisted.foo = 'car'"></button>
 
-        <span x-data x-text="$store.persisted.bar"></span>
 
+        <button data-change-foo x-data @click="$store.persisted.foo = 'car'"></button>
 
+        <span data-bar x-data x-text="$store.persisted.bar"></span>
 
+
 
+        <div x-data>
 
+            <ul>
 
+                <template x-for="todo in $store.todo.todos">
 
+                    <li data-todo-item x-text="todo"></li>
 
+                </template>
 
+            </ul>
 
+            <button data-add-todo @click="$store.todo.add('Example')">Add Todo</button>
 
+            <span data-todo-label x-text="$store.todoLabel.test"></span>
 
+        </div>
 
 
         <script src="/dist/spruce.umd.js"></script>
 
 
         <script>
 
+            Spruce.store('todo', {
 
+                todos: [],
 
+                add(todo) {
 
+                    this.todos.push(todo)
 
+                }
 
+            })
 
+
 
+            Spruce.store('todoLabel', {
 
+                test: 'Yes!'
 
+            })
 
+
 
             Spruce.store('persisted', {
 
                 foo: 'bar',
 
                 bar: 'boo'
 
             }, true)
 
 
+            Spruce.watch('todo.todos', () => {
 
+                Spruce.store('todoLabel').test = 'Yay!'
 
+            })
 
+
 
             Spruce.watch('persisted.foo', () => {
 
                 Spruce.store('persisted').bar = 'bop'
 
             })

+ 11 - 3
tests/cypress/integration/watchers.spec.js
查看文件 

@@ -5,11 +5,19 @@ describe('watchers', () => {
 
         cy.visit('/tests/cypress/fixtures/watchers/init.html')
 
 
         cy.get('p').should('have.text', 'bar')
 
-        cy.get('span').should('have.text', 'boo')
 
+        cy.get('[data-bar]').should('have.text', 'boo')
 
 
-        cy.get('button').click()
 
+        cy.get('[data-change-foo]').click()
 
 
         cy.get('p').should('have.text', 'car')
 
-        cy.get('span').should('have.text', 'bop')
 
+        cy.get('[data-bar]').should('have.text', 'bop')
 
+
 
+        cy.get('[data-todo-item]').should('have.length', 0)
 
+        cy.get('[data-todo-label]').should('have.text', 'Yes!')
 
+
 
+        cy.get('[data-add-todo]').click()
 
+
 
+        cy.get('[data-todo-item]').should('have.length', 1)
 
+        cy.get('[data-todo-label]').should('have.text', 'Yay!')
 
     })
 
 })

部分文件因文件數量過多而無法顯示