Last active
August 29, 2015 14:05
-
-
Save jcubic/667a3da84412d2d3a62c to your computer and use it in GitHub Desktop.
MVVM demo with route.js, jsViews, jQuery and hashchange
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var matched, browser; | |
| // Use of jQuery.browser is frowned upon. | |
| // More details: http://api.jquery.com/jQuery.browser | |
| // jQuery.uaMatch maintained for back-compat | |
| jQuery.uaMatch = function( ua ) { | |
| ua = ua.toLowerCase(); | |
| var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) || | |
| /(webkit)[ \/]([\w.]+)/.exec( ua ) || | |
| /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) || | |
| /(msie) ([\w.]+)/.exec( ua ) || | |
| ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || | |
| []; | |
| return { | |
| browser: match[ 1 ] || "", | |
| version: match[ 2 ] || "0" | |
| }; | |
| }; | |
| matched = jQuery.uaMatch( navigator.userAgent ); | |
| browser = {}; | |
| if ( matched.browser ) { | |
| browser[ matched.browser ] = true; | |
| browser.version = matched.version; | |
| } | |
| // Chrome is Webkit, but Webkit is also Safari. | |
| if ( browser.chrome ) { | |
| browser.webkit = true; | |
| } else if ( browser.webkit ) { | |
| browser.safari = true; | |
| } | |
| jQuery.browser = browser; | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>MVC Demo</title> | |
| <!--[if IE]> | |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <style> | |
| .tags a { | |
| cursor: pointer; | |
| margin-left: 5px; | |
| } | |
| .tags a:hover { | |
| color: red; | |
| } | |
| </style> | |
| <script src="jquery-1.11.1.min.js"></script> | |
| <!-- http://www.jsviews.com/ --> | |
| <script src="jsviews/jsviews.min.js"></script> | |
| <!-- extracted from jQuery 1.8, hashchange need this --> | |
| <script src="browser.js"></script> | |
| <!-- https://github.com/jcubic/route.js --> | |
| <script src="route.js"></script> | |
| <!-- https://github.com/cowboy/jquery-hashchange --> | |
| <script src="jquery.ba-hashchange.js"></script> | |
| <script> | |
| var app = { | |
| routes: [ | |
| { | |
| templateUrl: 'tags.html', | |
| url: '/tags', | |
| model: { | |
| tags: [{name: 'one'}] | |
| }, | |
| controller: function(name) { | |
| var model = this.model; | |
| this.view.find('input').keydown(function(e) { | |
| if (e.which == 13) { | |
| $.observable(model.tags).insert({name: $(this).val()}); | |
| $(this).val(''); | |
| } | |
| }); | |
| this.view.find('ul').on('click', 'a', function() { | |
| var view = $.view(this); | |
| $.observable(model.tags).remove(view.index); | |
| }); | |
| } | |
| }, | |
| { | |
| template: '<div>MVC with route.js, jsViews, jQuery and hashchange</div>', | |
| url: ['/', ''] | |
| }, | |
| { | |
| template: '<div>{^{:name}} <input data-link="name trigger=true"></div>', | |
| url: '/user/{{name}}', | |
| model: { | |
| }, | |
| controller: function(name) { | |
| if (!this.model.name) { | |
| $.observable(this.model).setProperty('name', name); | |
| } | |
| } | |
| } | |
| ] | |
| }; | |
| function boostrap(app, view) { | |
| var router = new route(); | |
| var template_cache = {}; | |
| for (var i=app.routes.length; i--;) { | |
| var ref = app.routes[i]; | |
| router.match(ref.url, ref.controller || $.noop, $.extend(ref, {view: $(view)})); | |
| } | |
| function lookup() { | |
| router.exec(location.hash.replace(/^#!/, ''), function init(data, run) { | |
| if (data.template) { | |
| if (!template_cache[data.template]) { | |
| template_cache[data.template] = $.templates(data.template); | |
| } | |
| template_cache[data.template].link(view, data.model); | |
| run(data); | |
| } else if (template_cache[data.templateUrl]) { | |
| template_cache[data.templateUrl].link(view, data.model); | |
| run(data); | |
| } else { | |
| if (data.templateUrl) { | |
| $.get(data.templateUrl, function(result) { | |
| template_cache[data.templateUrl] = $.templates(result); | |
| init(data, run); | |
| }, 'text'); | |
| } | |
| } | |
| }); | |
| } | |
| $(window).hashchange(lookup); | |
| lookup(); | |
| } | |
| $(function() { | |
| boostrap(app, '#view'); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <a href="#!/">home</a> | |
| <a href="#!/tags">tags</a> | |
| <a href="#!/user/John">user</a> | |
| <div id="view"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment