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

After having the basis of the upper part. We will be able to generate a blog content--blogposts Detail. This is the end of our mobile CMS almost basic functionality, 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 blog_details.html . And then. And then

<div class= "Information pure-g" >    {{#.}    } <div class= "Pure-u-1" >        <div class= "L-box" >            
 We obviously need to change a little bit before blog.html . In order to enable him to jump at the front desk 
{{#.}} 
The question arises, how can we enter 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. Another problem with this is that Ajax-run data cannot be removed from the outside. Then there is the Getblog () call to render method above.
Backbone Routing Parameters
We need to pass in a number to tell Blogdetail which blog post to get.
    Routes: {        ' index ': ' homepage ',        ' blog/*slug ': ' blog ',        ' *actions ': ' homepage '    }
*slug  is the content of the reference 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 " as seen below: 
 
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 will be able to open each blog very happily to see what's inside.
Other
CMS effect: Ink qi cms
QQ Discussion Group: 344271543
Project: Https://github.com/gmszone/moqi.mobi
 
Build a JavaScript-based mobile cms--Build blog (ii.). Routing