Skip to content
This repository
Browse code

Close #32 - scopes pure view-model observables

  • Loading branch information...
commit f1a253c60779feb79d2ae758d957caeb4f8bc927 1 parent 67b3306
Finnsson authored October 03, 2012
80  pager.js
@@ -345,9 +345,8 @@ p.showPage = function (route, pageRoute, originalRoute) {
345 345
     this.isVisible(true);
346 346
     this.originalRoute(originalRoute);
347 347
     this.route = route;
348  
-    if (pageRoute && pageRoute.params) {
349  
-        this.setParams(pageRoute.params);
350  
-    }
  348
+    this.pageRoute = pageRoute;
  349
+    this.setParams();
351 350
     this.show();
352 351
     this.childManager.showChild(route);
353 352
 };
@@ -357,20 +356,24 @@ p.showPage = function (route, pageRoute, originalRoute) {
357 356
  *
358 357
  * @param params
359 358
  */
360  
-p.setParams = function (params) {
361  
-    // get view model
362  
-    var vm = this.ctx;
363  
-    var userParams = this.val('params') || {};
364  
-    // for each param for URL
365  
-    $.each(params, function (key, value) {
366  
-        if (_.indexOf(userParams, key) !== -1) { // make sure it's a valid param
367  
-            if (vm[key]) { // set observable ...
368  
-                vm[key](value);
369  
-            } else { // ... or create observable
370  
-                vm[key] = ko.observable(value);
  359
+p.setParams = function () {
  360
+    if (this.pageRoute && this.pageRoute.params) {
  361
+        var params = this.pageRoute.params;
  362
+
  363
+        // get view model
  364
+        var vm = this.ctx;
  365
+        var userParams = this.val('params') || {};
  366
+        // for each param for URL
  367
+        $.each(params, function (key, value) {
  368
+            if (_.indexOf(userParams, key) !== -1) { // make sure it's a valid param
  369
+                if (vm[key]) { // set observable ...
  370
+                    vm[key](value);
  371
+                } else { // ... or create observable
  372
+                    vm[key] = ko.observable(value);
  373
+                }
371 374
             }
372  
-        }
373  
-    });
  375
+        });
  376
+    }
374 377
 };
375 378
 
376 379
 /**
@@ -391,38 +394,50 @@ p.hidePage = function (callback) {
391 394
  */
392 395
 p.init = function () {
393 396
     var m = this;
394  
-    var value = this.getValue();
395  
-    this.parentPage = this.getParentPage();
396  
-    this.parentPage.children.push(this);
  397
+    var value = m.getValue();
  398
+    m.parentPage = m.getParentPage();
  399
+    m.parentPage.children.push(this);
397 400
 
398  
-    this.hideElement();
  401
+    m.hideElement();
399 402
 
400 403
     // Fetch source
401  
-    if (this.val('source')) {
402  
-        this.loadSource(this.val('source'));
  404
+    if (m.val('source')) {
  405
+        m.loadSource(m.val('source'));
403 406
     }
404 407
 
405  
-    this.ctx = null;
  408
+    m.ctx = null;
406 409
     if (value['with']) {
407  
-        this.ctx = _ko.value(value['with']);
  410
+        m.ctx = _ko.value(value['with']);
  411
+        m.augmentContext();
408 412
     } else if (value.withOnShow) {
409  
-        this.ctx = {};
  413
+        m.ctx = {};
410 414
     } else {
411  
-        this.ctx = this.viewModel;
  415
+        m.ctx = m.viewModel;
  416
+        m.augmentContext();
412 417
     }
413  
-    if (this.val('params')) {
  418
+    m.childBindingContext = m.bindingContext.createChildContext(m.ctx);
  419
+    ko.utils.extend(m.childBindingContext, {$page:this});
  420
+    if (!m.val('withOnShow')) {
  421
+        ko.applyBindingsToDescendants(m.childBindingContext, m.element);
  422
+    }
  423
+    return { controlsDescendantBindings:true};
  424
+};
  425
+
  426
+p.augmentContext = function() {
  427
+    var m = this;
  428
+    if (m.val('params')) {
414 429
         $.each(this.val('params'), function (index, param) {
415 430
             if (!m.ctx[param]) {
416 431
                 m.ctx[param] = ko.observable();
417 432
             }
418 433
         });
419 434
     }
420  
-    this.childBindingContext = this.bindingContext.createChildContext(this.ctx);
421  
-    ko.utils.extend(this.childBindingContext, {$page:this});
422  
-    if (!this.val('withOnShow')) {
423  
-        ko.applyBindingsToDescendants(this.childBindingContext, this.element);
  435
+    if(this.val('vars')) {
  436
+        $.each(this.val('vars'), function(key, value) {
  437
+            m.ctx[key] = ko.observable(value);
  438
+        });
424 439
     }
425  
-    return { controlsDescendantBindings:true};
  440
+    this.setParams();
426 441
 };
427 442
 
428 443
 /**
@@ -573,6 +588,7 @@ p.show = function (callback) {
573 588
             me.val('withOnShow')(_.bind(function (vm) {
574 589
                 var childBindingContext = me.bindingContext.createChildContext(vm);
575 590
                 me.ctx = vm;
  591
+                me.augmentContext();
576 592
                 ko.utils.extend(childBindingContext, {$page:this});
577 593
                 ko.applyBindingsToDescendants(childBindingContext, me.element);
578 594
             }, this), this);
2  start-naive.js
@@ -4,7 +4,7 @@
4 4
  */
5 5
 pager.routeFromHashToPage = function (hash) {
6 6
     // skip # (or #!/)
7  
-    if (hash[0] === pager.Href.hash) {
  7
+    if (hash.substring(0, pager.Href.hash.length) === pager.Href.hash) {
8 8
         hash = hash.slice(pager.Href.hash.length);
9 9
     }
10 10
     // split on '/'
2  test/should_do_deep_navigation_with_wildcards.html
@@ -52,7 +52,6 @@
52 52
         until(function () {
53 53
             return $('#pelle').is(':visible');
54 54
         }, function () {
55  
-            console.error("1");
56 55
             equal($('#pelle').is(':visible'), true, 'pelle is visible');
57 56
             equal($('#start').is(':visible'), false, 'start is hidden');
58 57
 
@@ -62,7 +61,6 @@
62 61
             until(function () {
63 62
                 return $('#wild').is(':visible');
64 63
             }, function () {
65  
-                console.error("2");
66 64
                 equal($('#wild').is(':visible'), true, 'wild is visible');
67 65
                 start();
68 66
             });
88  test/should_introduce_view_observables_using_var.html
... ...
@@ -0,0 +1,88 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+    <title>Should introduce view observables using var</title>
  5
+    <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
  6
+    <script type="text/javascript" src="../lib/underscore-min.js"></script>
  7
+    <script type="text/javascript" src="../lib/knockout-2.1.0.js"></script>
  8
+    <script type="text/javascript" src="../pager.js"></script>
  9
+    <script type="text/javascript" src="../start-naive.js"></script>
  10
+
  11
+    <link rel="stylesheet" href="../lib/qunit.css"/>
  12
+</head>
  13
+<body>
  14
+
  15
+<div id="qunit"></div>
  16
+
  17
+<div data-bind="page: {id: 'start', vars: {x: null, y: 'test'}}">
  18
+    In Start!
  19
+
  20
+    <input id="a" data-bind="value: x" type="text"/>
  21
+    <input id="b" data-bind="value: x" type="text"/>
  22
+    <input id="c" data-bind="value: y" type="text"/>
  23
+    <input id="d" data-bind="value: y" type="text"/>
  24
+</div>
  25
+
  26
+<div data-bind="page: {id: 'lazy', vars: {x: null, y: 'test'}, params: ['z'], withOnShow: loadVM}">
  27
+    In Lazy!
  28
+
  29
+    <input id="e" data-bind="value: x" type="text"/>
  30
+    <input id="f" data-bind="value: x" type="text"/>
  31
+    <input id="g" data-bind="value: y" type="text"/>
  32
+    <input id="h" data-bind="value: y" type="text"/>
  33
+    <div id="z" data-bind="text: z"></div>
  34
+
  35
+    <div id="name" data-bind="text: name"></div>
  36
+</div>
  37
+
  38
+
  39
+<script type="text/javascript">
  40
+
  41
+    pager.Href.hash = '#!/';
  42
+
  43
+
  44
+    var viewModel = {
  45
+        loadVM:function (callback, page) {
  46
+            callback({
  47
+                name: "Pelle"
  48
+            });
  49
+        }
  50
+    };
  51
+
  52
+    pager.extendWithPage(viewModel);
  53
+    ko.applyBindings(viewModel);
  54
+
  55
+    pager.start(viewModel);
  56
+</script>
  57
+
  58
+<script type="text/javascript" src="../lib/qunit-until.js"></script>
  59
+<script type="text/javascript" src="../lib/qunit.js"></script>
  60
+
  61
+<script type="text/javascript">
  62
+
  63
+
  64
+    asyncTest("Should introduce view observables using var", function () {
  65
+
  66
+        ok($('#a').val() === $('#b').val());
  67
+        ok($('#c').val() === $('#d').val());
  68
+
  69
+        window.location.hash = '#!/lazy?z=hej';
  70
+
  71
+        until(function() {
  72
+           return $('#name').text() === 'Pelle';
  73
+        }, function() {
  74
+            ok($('#e').val() === $('#f').val());
  75
+            ok($('#g').val() === $('#h').val());
  76
+            ok($('#z').text() === 'hej');
  77
+            start();
  78
+
  79
+        });
  80
+
  81
+
  82
+
  83
+    });
  84
+</script>
  85
+
  86
+
  87
+</body>
  88
+</html>

0 notes on commit f1a253c

Please sign in to comment.
Something went wrong with that request. Please try again.