Skip to content

Commit

Permalink
Added Knockback Inject using all libraries (XUI, Zepto, jQuery). Bug …
Browse files Browse the repository at this point in the history 
…fixes for XUI reduced API.
  • Loading branch information
Kevin Malakoff committed Sep 16, 2012
1 parent b127983 commit 1d734a4
Show file tree
Hide file tree
Showing 35 changed files with 679 additions and 285 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Expand Up @@ -7,6 +7,8 @@ KnockbackNavigators.js provides page navigators, a pane navigator, and transitio
* [API Documentation](http://kmalakoff.github.com/knockback-navigators/doc/index.html)
* [Live Examples](http://kmalakoff.github.com/knockback-navigators/)

**Note**: if you are using Knockback-Navigators.js with Knockback.js without a module loader, you must include Knockback.js before Knockback-Navigators.js.

#Download Latest (0.1.1):

Please see the [release notes](https://github.com/kmalakoff/knockback-navigators/blob/master/RELEASE_NOTES.md) for upgrade pointers.
Expand Down
1 change: 1 addition & 0 deletions RELEASE_NOTES.md
View file
Expand Up @@ -5,6 +5,7 @@ Please refer to the following release notes when upgrading your version of Knock
* added AMD loader to all components.
* updated kb.loadUrl and added kb.loadUrlFn so they can be called directly from an HTML View
* renamed knockback-sample-transitions to knockback-sample-transitions-jquery
* XUI bug fixed: reverse on panes and appending source code

## 0.1.0

Expand Down
3 changes: 2 additions & 1 deletion examples/pn-nt+_xui.html
View file
Expand Up @@ -52,7 +52,8 @@
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
$('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>

</body>
Expand Down
78 changes: 78 additions & 0 deletions examples/pnp-nt-i_xui_pth_kb.html
View file
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockbackNavigators.js Interactive Tests</title>
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>

<div kb-inject="AppViewModel">
<!-- VIEWS -->
<div class='pane' id='main'>
<div class='hero-unit'>
<a href='#page1' class='btn btn-warning btn-small'>Page1</a>
<h1>Main</h1>
</div>
</div>

<div class='pane' id='page1'>
<div class='hero-unit'>
<a href='#' class='btn btn-small'><i class='icon-step-backward'></i><span> Back</span></a>
<a href='#page2' class='btn btn-warning btn-small'>Page2</a>
<h1>Page1</h1>
</div>
</div>

<div class='pane' id='page2'>
<div class='hero-unit'>
<a href='#page1' class='btn btn-small'><i class='icon-step-backward'></i><span> Back</span></a>
<h1>Page2</h1>
</div>
</div>
</div>

<script src="vendor/xui-2.3.2.js"></script>
<script src="vendor/path-0.8.4.js"></script>
<script src="vendor/knockback-core-stack-0.16.5.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>

<script type='text/javascript'>
var AppViewModel = function(vm, el) {
////////////////////////////////////
// Page Routing and Navigating
// Don't allow pages to be detached since they are owned by the DOM (default is to assume dynamic pages and to therefore detach)
////////////////////////////////////
var page_navigator = new kb.PageNavigatorPanes(el, {no_remove: true});
Path.map('').to(page_navigator.dispatcher(function(){
page_navigator.loadPage($(el).find('#main')[0]);
}));
Path.map('#page1').to(page_navigator.dispatcher(function(){
page_navigator.loadPage($(el).find('#page1')[0]);
}));
Path.map('#page2').to(page_navigator.dispatcher(function(){
page_navigator.loadPage($(el).find('#page2')[0]);
}));
Path.listen();

// start routing after the ViewModel is bound (and the elements have been generated)
this.afterBinding = function() { Path.dispatch(window.location.hash); };
};

</script>
<!-- ****************** -->
<!-- Source -->
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>

</body>
</html>
3 changes: 2 additions & 1 deletion examples/pnp-nt_xui_pth.html
View file
Expand Up @@ -65,7 +65,8 @@ <h1>Page2</h1>
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
$('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
var el = $('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0];
$('body')[0].appendChild(el);
</script>

</body>
Expand Down
106 changes: 106 additions & 0 deletions examples/pnp-t-i_jq_kb.html
View file
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockbackNavigators.js Interactive Tests</title>
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
</head>
<body kb-inject="AppViewModel">
<a class='btn' href='../index.html#page_navigator_panes' style='position: absolute; z-index: 200'>More Examples</a>

<div class='embed' data-bind="PageNavigatorPanes: {loaded: loaded}"></div>

<!-- VIEWS -->
<script type="text/x-jq" id='page'>
<div data-bind="attr: {id: id}">
<div class='hero-unit'>
<!-- ko if: $data.back -->
<a class='btn btn-small' data-bind="click: function(){kb.loadUrl(back().href(), back_transition()); }"><i class='icon-step-backward'></i><span> Back</span></a>
<!-- /ko -->
<!-- ko if: $data.next -->
<a class='btn btn-warning btn-small' data-bind="attr: {href: next().href()}, text: next().title"></a>
<!-- /ko -->
<h1 data-bind="text: title"></h1>
</div>
</div>
</script>

<script src="vendor/jquery-1.8.0.js"></script>
<script src="vendor/knockback-core-stack-0.16.5.js"></script>
<script src="../knockback-page-navigator-panes.js"></script>
<script src="../lib/knockback-sample-transitions-jquery.js"></script>

<script type='text/javascript'>
////////////////////////////////////
// ViewModels
////////////////////////////////////
var PageViewModel = kb.ViewModel.extend({
constructor: function(model, options) {
kb.ViewModel.prototype.constructor.call(this, model, {options: options, factories: {
'back': PageViewModel, // provide a custom view model for relationships
'next': PageViewModel
}});
return this;
}
});

var AppViewModel = function() {
////////////////////////////////////
// Models
////////////////////////////////////
var pages = new Backbone.Collection([
new Backbone.Model({title: 'Main', id: 'main', href: '#'}),
new Backbone.Model({title: 'Page1', id: 'page1', href: '#page1'}),
new Backbone.Model({title: 'Page2', id: 'page2', href: '#page2'})
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});

////////////////////////////////////
// Page Routing and Navigating
// Use Knockout.js page embedding to create and bind
// Allow pages to be detached/destroyed since they are dynamically created
////////////////////////////////////
this.loaded = function(page_navigator) {
var router = new Backbone.Router()
router.route('', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('main'))),
transition: 'FadeIn'
});
}));
router.route('page1', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page1'))),
transition: 'NavigationSlide'
});
}));
router.route('page2', null, page_navigator.dispatcher(function(){
page_navigator.loadPage({
el: kb.renderTemplate('page', new PageViewModel(pages.get('page2'))),
transition: 'CoverVertical'
});
}));
};

// start routing after the ViewModel is bound (and the elements have been generated)
this.afterBinding = function() { Backbone.history.start({hashChange: true}); };
};

</script>
<!-- ****************** -->
<!-- Source -->
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
$('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>

</body>
</html>
95 changes: 95 additions & 0 deletions examples/pns-i_zpt_kb.html
View file
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockbackNavigators.js Interactive Tests</title>
<link rel="stylesheet" href="vendor/normalize.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../knockback-navigators.css">
</head>
<body>
<a class='btn' href='../index.html#page_navigator_simple' style='position: absolute; z-index: 200'>More Examples</a>

<div data-bind="foreach: pages" kb-inject="AppViewModel">

<!-- VIEWS -->
<div class='pane' data-bind="attr: {id: id}">
<div class='hero-unit'>
<!-- ko if: $data.back -->
<a class='btn btn-small' data-bind="click: function(){kb.loadUrl(back().href(), back_transition()); }"><i class='icon-step-backward'></i><span> Back</span></a>
<!-- /ko -->
<!-- ko if: $data.next -->
<a class='btn btn-warning btn-small' data-bind="attr: {href: next().href()}, text: next().title"></a>
<!-- /ko -->
<h1 data-bind="text: title"></h1>
</div>
</div>

</div>

<script src="vendor/zepto-1.0rc1.js"></script>
<script src="vendor/knockback-core-stack-0.16.5.js"></script>
<script src="../knockback-page-navigator-simple.js"></script>

<script type='text/javascript'>
////////////////////////////////////
// ViewModels
////////////////////////////////////
var PageViewModel = kb.ViewModel.extend({
constructor: function(model, options) {
kb.ViewModel.prototype.constructor.call(this, model, {options: options, factories: {
'back': PageViewModel, // provide a custom view model for relationships
'next': PageViewModel
}});
return this;
}
});
var AppViewModel = function(vm, el) {
////////////////////////////////////
// Models
////////////////////////////////////
var pages = new Backbone.Collection([
new Backbone.Model({title: 'Main', id: 'main', href: '#'}),
new Backbone.Model({title: 'Page1', id: 'page1', href: '#page1'}),
new Backbone.Model({title: 'Page2', id: 'page2', href: '#page2'})
]);
// Initialize relationships between pages - NOTE: you can use BackboneRelational to automate this at model creation time (of course, this is just an example so you might not use models for your pages)
pages.get('main').set({next: pages.get('page1')});
pages.get('page1').set({back: pages.get('main'), back_transition: {name: 'NavigationSlide', inverse: true}, next: pages.get('page2')});
pages.get('page2').set({back: pages.get('page1'), back_transition: {name: 'CoverVertical', inverse: true}});

this.pages = kb.collectionObservable(pages, {view_model: PageViewModel});

////////////////////////////////////
// Page Routing and Navigating
// Don't allow pages to be detached since they are owned by the DOM (default is to assume dynamic pages and to therefore detach)
////////////////////////////////////
var page_navigator = new kb.PageNavigatorSimple(el, {no_remove: true});
var router = new Backbone.Router()
router.route('', null, page_navigator.dispatcher(function(){
page_navigator.loadPage($(el).find('#main')[0]);
}));
router.route('page1', null, page_navigator.dispatcher(function(){
page_navigator.loadPage($(el).find('#page1')[0]);
}));
router.route('page2', null, page_navigator.dispatcher(function(){
page_navigator.loadPage($(el).find('#page2')[0]);
}));

// start routing after the ViewModel is bound (and the elements have been generated)
this.afterBinding = function() { Backbone.history.start({hashChange: true}); };
};

</script>
<!-- ****************** -->
<!-- Source -->
<!-- ****************** -->
<script src="vendor/backbone/underscore-1.3.3.js"></script>
<script type='text/javascript'>
$('body').append($('<div style="position: absolute; top: 220px"><h1>Example Source</h1><pre>' +_.escape(document.body.innerHTML.substring(0, document.body.innerHTML.indexOf('<!-- ****************** -->')))+'</pre></div>')[0]);
</script>

</body>
</html>

0 comments on commit 1d734a4

Please sign in to comment.