Просмотр исходного кода

conditional dependency tracking

Evan You 12 лет назад
Родитель
Сommit
795d6b985f
3 измененных файлов с 32 добавлено и 4 удалено
  1. 7 3
      src/exp-parser.js
  2. 15 0
      test/functional/fixtures/expression.html
  3. 10 1
      test/functional/specs/expression.js

+ 7 - 3
src/exp-parser.js

@@ -104,10 +104,14 @@ module.exports = {
             return makeGetter('return ' + exp, exp)
             return makeGetter('return ' + exp, exp)
         }
         }
         vars = utils.unique(vars)
         vars = utils.unique(vars)
-        var pathRE = new RegExp("\\b(" + vars.join('|') + ")[$\\w\\.]*\\b", 'g'),
-            body   = 'return ' + exp.replace(pathRE, function (path) {
-                return 'this.' + getRel(path, compiler) + path
+        var accessors = '',
+            pathRE = new RegExp("\\b(" + vars.join('|') + ")[$\\w\\.]*\\b", 'g'),
+            body = 'return ' + exp.replace(pathRE, function (path) {
+                var val = 'this.' + getRel(path, compiler) + path
+                accessors += val + ';'
+                return val
             })
             })
+        body = accessors + body
         return makeGetter(body, exp)
         return makeGetter(body, exp)
     }
     }
 }
 }

+ 15 - 0
test/functional/fixtures/expression.html

@@ -18,7 +18,13 @@
             </form>
             </form>
             <button sd-on="click: two.three = 'clicked'">click</button>
             <button sd-on="click: two.three = 'clicked'">click</button>
         </div>
         </div>
+        <div id="conditional">
+            <p>{{ok ? yesMsg : noMsg}}</p>
+            <button sd-on="click: ok = !ok" class="toggle">toggle</button>
+            <button sd-on="click: noMsg = 'Nah'" class="change">change</button>
+        </div>
         <script>
         <script>
+        Seed.config({debug:true})
             var normal = new Seed({
             var normal = new Seed({
                 el: '#normal',
                 el: '#normal',
                 scope: {
                 scope: {
@@ -39,6 +45,15 @@
                     }
                     }
                 }
                 }
             })
             })
+
+            var conditional = new Seed({
+                el: '#conditional',
+                scope: {
+                    ok: true,
+                    yesMsg: 'YES',
+                    noMsg: 'NO'
+                }
+            })
         </script>
         </script>
     </body>
     </body>
 </html>
 </html>

+ 10 - 1
test/functional/specs/expression.js

@@ -1,6 +1,6 @@
 /* global normal */
 /* global normal */
 
 
-casper.test.begin('Expression', 16, function (test) {
+casper.test.begin('Expression', 19, function (test) {
     
     
     casper
     casper
     .start('./fixtures/expression.html', function () {
     .start('./fixtures/expression.html', function () {
@@ -47,6 +47,15 @@ casper.test.begin('Expression', 16, function (test) {
         test.assertField('four', 'clicked')
         test.assertField('four', 'clicked')
         test.assertSelectorHasText('#lazy p', 'three clicked!')
         test.assertSelectorHasText('#lazy p', 'three clicked!')
 
 
+        // conditional expression
+        // e.g. ok ? yesMSg : noMsg
+        // make sure all three are captured as dependency
+        test.assertSelectorHasText('#conditional p', 'YES')
+        this.click('#conditional .toggle')
+        test.assertSelectorHasText('#conditional p', 'NO')
+        this.click('#conditional .change')
+        test.assertSelectorHasText('#conditional p', 'Nah')
+
     })
     })
     .run(function () {
     .run(function () {
         test.done()
         test.done()