構建基於Javascript的移動CMS——產生部落格(二).路由

來源:互聯網
上載者:User

標籤:content   查看   mono   app   start   top   lan   ida   port   

在有了上部分的基礎之後。我們就能夠產生一個部落格的內容——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    };});

接著我們便能夠非常愉快地開啟每一篇部落格查看裡面的內容了。

其它

CMS效果: 墨頎 CMS

QQ討論群: 344271543

項目: https://github.com/gmszone/moqi.mobi

構建基於Javascript的移動CMS——產生部落格(二).路由

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.