构建基于Javascript的移动CMS——生成博客(二).路由

浏览数：18 / 时间：2015年06月11日

在有了上部分的基础之后，我们就可以生成一个博客的内容——BlogPosts Detail。这样就完成了我们这个移动CMS的几乎主要的功能了，有了上节想必对于我们来说要获取一个文章已经不是一件难的事情了。

获取每篇博客

于是我们照猫画虎地写了一个BlogDetail.js

define([
    ‘jquery‘,
    ‘underscore‘,
    ‘mustache‘,
    ‘text!/blog_details.html‘
],function($, _, Mustache, blogDetailsTemplate){

    var BlogPostModel = Backbone.Model.extend({
        name: ‘Blog Posts‘,
        url: function(){
            return this.instanceUrl;
        },
        initialize: function(props){
            this.instanceUrl = props;
        }
    });

    var BlogDetailView = Backbone.View.extend ({
        el: $("#content"),

        initialize: function () {
        },

        getBlog: function(slug) {
            url = "http://api.phodal.net/blog/" + slug;
            var that = 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;
});

又写了一个blog_details.html，然后，然后

<div class="information pure-g">
    {{#.}}
    <div class="pure-u-1 ">
        <div class="l-box">
            <h3 class="information-head"><a href="#/blog/{{slug}}" alt="{{title}}">{{title}}</a></h3>
            <p>
                发布时间:<span>{{created}}</span>
            <p>
                {{{content}}}
            </p>

            </p>
        </div>
    </div>
    {{/.}}
</div>

我们显然需要稍微地修改一下之前blog.html的模板，为了让他可以在前台跳转

{{#.}}
<h2><a href="#/{{slug}}" alt="{{title}}">{{title}}</a></h2>
<p>{{description}}</p>
{{/.}}

问题出现了，我们怎样才能进入最后的页面？

添加博文的路由

在上一篇结束之后，每个博文都有对应的URL，即有对应的slug。而我们的博客的获取就是根据这个URL，获取的，换句话说，这些事情都是由API在做的。这里所要做的便是，获取博客的内容，再render。这其中又有一个问题是ajax执行的数据无法从外部取出，于是就有了上面的getBlog()调用render的方法。

Backbone路由参数

我们需要传进一个参数，以便告诉BlogDetail需要获取哪一篇博文。

    routes: {
        ‘index‘: ‘homePage‘,
        ‘blog/*slug‘: ‘blog‘,
        ‘*actions‘: ‘homePage‘
    }

*slug便是这里的参数的内容，接着我们需要调用getBlog(slug)对其进行处理。

app_router.on(‘route:blog‘, function(blogSlug){
        var blogDetailsView = new BlogDetail();
        blogDetailsView.getBlog(blogSlug);
    });

最后，我们的router.js的内容如下所示:

define([
    ‘jquery‘,
    ‘underscore‘,
    ‘backbone‘,
    ‘HomeView‘,
    ‘BlogDetail‘
], function($, _, Backbone, HomeView, BlogDetail) {

    var AppRouter = Backbone.Router.extend({
        routes: {
            ‘index‘: ‘homePage‘,
            ‘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
    };
});

接着我们便可以很愉快地打开每一篇博客查看里面的内容了。