Permalink
Browse files

Close #32 - scopes pure view-model observables

  • Loading branch information...
1 parent 67b3306 commit f1a253c60779feb79d2ae758d957caeb4f8bc927 @finnsson committed Oct 3, 2012
View
@@ -345,9 +345,8 @@ p.showPage = function (route, pageRoute, originalRoute) {
this.isVisible(true);
this.originalRoute(originalRoute);
this.route = route;
- if (pageRoute && pageRoute.params) {
- this.setParams(pageRoute.params);
- }
+ this.pageRoute = pageRoute;
+ this.setParams();
this.show();
this.childManager.showChild(route);
};
@@ -357,20 +356,24 @@ p.showPage = function (route, pageRoute, originalRoute) {
*
* @param params
*/
-p.setParams = function (params) {
- // get view model
- var vm = this.ctx;
- var userParams = this.val('params') || {};
- // for each param for URL
- $.each(params, function (key, value) {
- if (_.indexOf(userParams, key) !== -1) { // make sure it's a valid param
- if (vm[key]) { // set observable ...
- vm[key](value);
- } else { // ... or create observable
- vm[key] = ko.observable(value);
+p.setParams = function () {
+ if (this.pageRoute && this.pageRoute.params) {
+ var params = this.pageRoute.params;
+
+ // get view model
+ var vm = this.ctx;
+ var userParams = this.val('params') || {};
+ // for each param for URL
+ $.each(params, function (key, value) {
+ if (_.indexOf(userParams, key) !== -1) { // make sure it's a valid param
+ if (vm[key]) { // set observable ...
+ vm[key](value);
+ } else { // ... or create observable
+ vm[key] = ko.observable(value);
+ }
}
- }
- });
+ });
+ }
};
/**
@@ -391,38 +394,50 @@ p.hidePage = function (callback) {
*/
p.init = function () {
var m = this;
- var value = this.getValue();
- this.parentPage = this.getParentPage();
- this.parentPage.children.push(this);
+ var value = m.getValue();
+ m.parentPage = m.getParentPage();
+ m.parentPage.children.push(this);
- this.hideElement();
+ m.hideElement();
// Fetch source
- if (this.val('source')) {
- this.loadSource(this.val('source'));
+ if (m.val('source')) {
+ m.loadSource(m.val('source'));
}
- this.ctx = null;
+ m.ctx = null;
if (value['with']) {
- this.ctx = _ko.value(value['with']);
+ m.ctx = _ko.value(value['with']);
+ m.augmentContext();
} else if (value.withOnShow) {
- this.ctx = {};
+ m.ctx = {};
} else {
- this.ctx = this.viewModel;
+ m.ctx = m.viewModel;
+ m.augmentContext();
}
- if (this.val('params')) {
+ m.childBindingContext = m.bindingContext.createChildContext(m.ctx);
+ ko.utils.extend(m.childBindingContext, {$page:this});
+ if (!m.val('withOnShow')) {
+ ko.applyBindingsToDescendants(m.childBindingContext, m.element);
+ }
+ return { controlsDescendantBindings:true};
+};
+
+p.augmentContext = function() {
+ var m = this;
+ if (m.val('params')) {
$.each(this.val('params'), function (index, param) {
if (!m.ctx[param]) {
m.ctx[param] = ko.observable();
}
});
}
- this.childBindingContext = this.bindingContext.createChildContext(this.ctx);
- ko.utils.extend(this.childBindingContext, {$page:this});
- if (!this.val('withOnShow')) {
- ko.applyBindingsToDescendants(this.childBindingContext, this.element);
+ if(this.val('vars')) {
+ $.each(this.val('vars'), function(key, value) {
+ m.ctx[key] = ko.observable(value);
+ });
}
- return { controlsDescendantBindings:true};
+ this.setParams();
};
/**
@@ -573,6 +588,7 @@ p.show = function (callback) {
me.val('withOnShow')(_.bind(function (vm) {
var childBindingContext = me.bindingContext.createChildContext(vm);
me.ctx = vm;
+ me.augmentContext();
ko.utils.extend(childBindingContext, {$page:this});
ko.applyBindingsToDescendants(childBindingContext, me.element);
}, this), this);
View
@@ -4,7 +4,7 @@
*/
pager.routeFromHashToPage = function (hash) {
// skip # (or #!/)
- if (hash[0] === pager.Href.hash) {
+ if (hash.substring(0, pager.Href.hash.length) === pager.Href.hash) {
hash = hash.slice(pager.Href.hash.length);
}
// split on '/'
@@ -52,7 +52,6 @@
until(function () {
return $('#pelle').is(':visible');
}, function () {
- console.error("1");
equal($('#pelle').is(':visible'), true, 'pelle is visible');
equal($('#start').is(':visible'), false, 'start is hidden');
@@ -62,7 +61,6 @@
until(function () {
return $('#wild').is(':visible');
}, function () {
- console.error("2");
equal($('#wild').is(':visible'), true, 'wild is visible');
start();
});
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Should introduce view observables using var</title>
+ <script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
+ <script type="text/javascript" src="../lib/underscore-min.js"></script>
+ <script type="text/javascript" src="../lib/knockout-2.1.0.js"></script>
+ <script type="text/javascript" src="../pager.js"></script>
+ <script type="text/javascript" src="../start-naive.js"></script>
+
+ <link rel="stylesheet" href="../lib/qunit.css"/>
+</head>
+<body>
+
+<div id="qunit"></div>
+
+<div data-bind="page: {id: 'start', vars: {x: null, y: 'test'}}">
+ In Start!
+
+ <input id="a" data-bind="value: x" type="text"/>
+ <input id="b" data-bind="value: x" type="text"/>
+ <input id="c" data-bind="value: y" type="text"/>
+ <input id="d" data-bind="value: y" type="text"/>
+</div>
+
+<div data-bind="page: {id: 'lazy', vars: {x: null, y: 'test'}, params: ['z'], withOnShow: loadVM}">
+ In Lazy!
+
+ <input id="e" data-bind="value: x" type="text"/>
+ <input id="f" data-bind="value: x" type="text"/>
+ <input id="g" data-bind="value: y" type="text"/>
+ <input id="h" data-bind="value: y" type="text"/>
+ <div id="z" data-bind="text: z"></div>
+
+ <div id="name" data-bind="text: name"></div>
+</div>
+
+
+<script type="text/javascript">
+
+ pager.Href.hash = '#!/';
+
+
+ var viewModel = {
+ loadVM:function (callback, page) {
+ callback({
+ name: "Pelle"
+ });
+ }
+ };
+
+ pager.extendWithPage(viewModel);
+ ko.applyBindings(viewModel);
+
+ pager.start(viewModel);
+</script>
+
+<script type="text/javascript" src="../lib/qunit-until.js"></script>
+<script type="text/javascript" src="../lib/qunit.js"></script>
+
+<script type="text/javascript">
+
+
+ asyncTest("Should introduce view observables using var", function () {
+
+ ok($('#a').val() === $('#b').val());
+ ok($('#c').val() === $('#d').val());
+
+ window.location.hash = '#!/lazy?z=hej';
+
+ until(function() {
+ return $('#name').text() === 'Pelle';
+ }, function() {
+ ok($('#e').val() === $('#f').val());
+ ok($('#g').val() === $('#h').val());
+ ok($('#z').text() === 'hej');
+ start();
+
+ });
+
+
+
+ });
+</script>
+
+
+</body>
+</html>

0 comments on commit f1a253c

Please sign in to comment.