Build a JavaScript-based mobile cms--Build blog (ii.). Routing

With the foundation in the upper part, we can generate a blog content--blogposts Detail. This completes our mobile CMS almost the main function, with the last section presumably for us to get an article is not a difficult thing.

Get each blog post

so we tiger to write a blogdetail.js

define ([' jquery ', ' underscore ', ' mustache ', ' text!/blog_details.html '],function ($, _, mustache, Blogdetailste mplate) {var Blogpostmodel = Backbone.Model.extend ({name: ' Blog Posts ', url:function () {Retu        RN This.instanceurl;        }, Initialize:function (props) {this.instanceurl = props;    }    }); var Blogdetailview = Backbone.View.extend ({el: $ ("#content"), Initialize:function () {}, G            Etblog:function (slug) {url = "http://api.phodal.net/blog/" + slug;            var = this;            collection = new Blogpostmodel;            Collection.initialize (URL);                Collection.fetch ({success:function (collection, response) {That.render (response);        }            });        }, Render:function (response) {this. $el. HTML (mustache.to_html (blogdetailstemplate, response));    }    }); return blogdetailview;}); 

Wrote another one, and then blog_details.html , then

<div class= "Information pure-g" >    {{#.}    } <div class= "Pure-u-1" >        <div class= "L-box" >            
 > We obviously need to revise a little bit before blog.html  template, in order to allow him to jump at the front desk 
{{#.}} 
The question arises, how do we get to the final page?
Add a route to a blog post
After the end of the previous article, each blog post has a corresponding URL, that is, the corresponding slug. And our blog access is based on this URL, get, in other words, these things are done by the API. The thing to do here is to get the content of the blog and render it. One of the problems is that AJAX-executed data cannot be taken out of the way, so there is a getblog () call to render.
Backbone Routing Parameters
We need to pass in a parameter to tell Blogdetail which blog post to get.
    Routes: {        ' index ': ' homepage ',        ' blog/*slug ': ' blog ',        ' *actions ': ' homepage '    }
*slug  is the content of the parameter here, and then we need to call Getblog (slug) to process it. 
App_router.on (' Route:blog ', function (blogslug) {        var blogdetailsview = new Blogdetail ();        Blogdetailsview.getblog (Blogslug);    });
 Finally, our router.js  are as follows: 
define ([    ' jquery ',    ' underscore ',    ' backbone ',    ' Homeview ',    ' blogdetail '], function ($, _, Backbone, Homeview, blogdetail) {    var approuter = Backbone.Router.extend ({        routes: {            ' index ': ' homepage ', c8/> ' blog/*slug ': ' blog ',            ' *actions ': ' homepage '        }    };    var initialize = function () {        var app_router = new Approuter;        App_router.on (' Route:homepage ', function () {            var homeview = new Homeview ();            Homeview.render ();        });        App_router.on (' Route:blog ', function (blogslug) {            var blogdetailsview = new Blogdetail ();            Blogdetailsview.getblog (Blogslug);        });        Backbone.history.start ();    };    return {        initialize:initialize    };});
Then we can happily open each blog to see what's inside.
Other
CMS effect: Ink qi cms
QQ Discussion Group: 344271543
 project:  https://github.com/gmszone/moqi.mobi