Refactoring mithril code.
h3rald h3rald@h3rald.com
Sat, 28 Feb 2015 22:16:09 +0100
2 files changed,
91 insertions(+),
49 deletions(-)
M
app/index.html
→
app/index.html
@@ -8,42 +8,6 @@ <title>LiteStore</title>
<link rel="stylesheet" href="styles/litestore.css"> </head> <body> - <nav class="navbar navbar-inverse navbar-fixed-top"> - <div class="container-fluid"> - <!-- Brand and toggle get grouped for better mobile display --> - <div class="navbar-header"> - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">LiteStore</a> - </div> - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> - <ul id="nav-links" class="nav navbar-nav"> - <li id="nav-overview"><a href="#/">Overview</a></li> - <li id="nav-getting-started"><a href="#/getting-started">Getting Started</a></li> - <li id="nav-usage"><a href="#/usage">Usage</a></li> - <li id="nav-api"><a href="#/api">API</a></li> - <li id="nav-credits"><a href="#/credits">Credits</a></li> - </ul> - <form class="navbar-form navbar-right" role="search"> - <div class="input-group"> - <input type="text" class="form-control" placeholder="Search..."> - <span class="input-group-btn"> - <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> - </span> - </div><!-- /input-group --> - </form> - </div><!-- /.navbar-collapse --> - </div><!-- /.container-fluid --> - </nav> - <div class="container"> - <main class="row"> - </main> - </div> - <script src="js/jquery.min.js"> </script> <script src="js/marked.min.js"></script> <script src="js/mithril.min.js"></script>
M
app/js/app.js
→
app/js/app.js
@@ -1,4 +1,3 @@
- var Page = {} Page.get = function(id) {@@ -10,20 +9,99 @@ deserialize: function(value) {return value;}
}).then(function(content){ return marked(content)}); } -var litestore = { - controller: function() { - this.pageid = m.route.param("page"); - this.content = Page.get(this.pageid); - }, - view: function(controller) { - $('#nav-links').find('.active').removeClass('active'); - $('#nav-'+controller.pageid).addClass('active'); - return m("article", m.trust(controller.content())); - } +var app = {} + +app.vm = {}; + +app.controller = function(){ + this.navbar = new app.navbar.controller(); + app.vm.init(); +} + +app.vm.init = function() { + this.pageid = m.prop(m.route.param("page")); + this.content = Page.get(this.pageid()); +} + +app.view = function(ctrl){ + return m("div", [ + m(".container", [ + app.navbar.view(ctrl.navbar), + m("main.row", [ + m("article", m.trust(app.vm.content())) + ]) + ]) + ]) +} + +app.navlinks = { + controller: function() { + this.links = m.prop([ + {id: "overview", title: "Overview"}, + {id: "getting-started", title: "Getting Started"}, + {id: "usage", title: "Usage"}, + {id: "api", title: "API"}, + {id: "credits", title: "Credits"} + ]); + }, + view: function(ctrl) { + return m("ul#nav-links.nav.navbar-nav", + ctrl.links().map(function(e){ + return m("li", {id: "nav-"+e.id, class: (app.vm.pageid() == e.id) ? "active" : ""}, + [m("a", {href: "/pages/"+e.id, config: m.route}, e.title)])})); + } +} + +app.navheader = { + controller: function() {}, + view: function(ctrl) { + return m(".navbar-header", [ + m("button.navbar-toggle.collapsed[data-toggle='collapse'][data-target='#nav-collapse'][type='button']", [ + m("span.sr-only", "Toggle navigation"), + m("span.icon-bar"), + m("span.icon-bar"), + m("span.icon-bar") + ]), + m("a.navbar-brand", {href: "/", config:m.route}, "LiteStore") + ]) + } +} + +app.searchbox = { + controller: function() {}, + view: function(ctrl) { + return m("form.navbar-form.navbar-right[role='search']", [ + m(".input-group", [ + m("input.form-control[type='text'i][placeholder='Search...']"), + m("span.input-group-btn", + m("button.btn.btn-default[type='button']", [m("i.fa.fa-search")])) + ]) + ] + ) + } +} + +app.navbar = { + controller: function() { + this.navheader = new app.navheader.controller(); + this.navlinks = new app.navlinks.controller(); + this.searchbox = new app.searchbox.controller(); + }, + view: function(ctrl) { + return m("nav.navbar.navbar-inverse.navbar-fixed-top", [ + m(".container-fluid", [ + app.navheader.view(ctrl.navheader), + m("#nav-collapse.collapse.navbar-collapse", [ + app.navlinks.view(ctrl.navlinks), + app.searchbox.view(ctrl.searchbox) + ]) + ]) + ]) + } } m.route.mode = "hash"; -m.route(document.getElementsByTagName("main")[0], "/overview", { - "/:page": litestore +m.route(document.body, "/pages/overview", { + "/pages/:page": app });