標籤: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——產生部落格(二).路由