当前位置: 代码迷 >> JavaScript >> Backbone.js开发第一步(3)
  详细解决方案

Backbone.js开发第一步(3)

热度:853   发布时间:2013-12-30 14:16:08.0
Backbone.js开发第一步(三)

Backbone image

什么是一个集合?

Backbone中的集合简单来说就是一列有序的模型。它可以被使用在例如下面例子这样的情形:

- 模型:Student,集合:ClassStudents 
- 模型:Todo Item,集合:Todo List
- 模型:Animals,集合:Zoo

一般来说你的集合只使用一种类型的模型,但是模型本身并不限于在一种类型的集合中使用:

- 模型:Student,集合:Gym Class
- 模型:Student,集合:Art Class
- 模型:Student,集合:English Class

下面是一个一般的模型/集合的例子:

var Song = Backbone.Model.extend({
    initialize: function(){
        console.log("Music is the answer");
    }
});

var Album = Backbone.Collection.extend({
    model: Song
});

创建一个集合

现在我们使用一些有用的数据来创建一个集合。

var Song = Backbone.Model.extend({
    defaults:{
        name: "Not specified",
        artist: "Not specified"
    },
    initialize: function(){
        console.log("Music is the answer");
    }
});

var Album = Backbone.Collection.extend({
    model: Song
});

var song1 = new Song({name: "How Bizarre", artist: "OMC"});   
var song2 = new Song({name: "Sexual Healing", artist:"Marvin Gaye"});  

var song3 = new Song({name: "Talk It Over In Bed", artist: "OMC"});

var myAlbum = new Album([song1,song2,song3]);
console.log(myAlbum.models); // [song1,song2,song3]  

什么是一个路由?

当使用了哈希标签(#)的时候,Backbone中的路由器用于将你的应用路由到相应的URL.在传统的MVC印象中路由似乎并不是必须的。然而Backbone中的路由器在你的应用需要URL路由/历史的功能时非常有用。

定义一个路由器需要至少一个路由以及一个映射到具体路由的函数。在下面的例子中我们将会来定义一个路由。

还要注意的一点是路由解释URL中位于”#”标签之后的任何东西。你的应用中的所有连接需要标的到”#/action”或者”#action”。(在哈希标签后面添加一个正斜杠看起来更好看,例如:?http://example.com/#/user/help)。

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "*actions": "defaultRoute" //匹配 http://example.com/#anything-here
        }
    });
    //初始化路由器   

    var app_router = new AppRouter;

    app_router.on('route:defaultRoute',function(actions){
        alert(actions);
    });

    //开始Backbone的历史是一个必要的步骤
    Backbone.history.start();

</script>   

动态路由

大多数传统的框架允许你定义包含混合着静态和动态路由变量的路由。例如你可能想要从一个友好的URL字符串接收一个带有一个变量的post请求。例如你的URL看起来可能是”http://example.com/#/posts/12”。一旦这个路由被激活你可能想要获取URL字符串中的id值。下面的例子实现了这个功能。

<script>
    var AppRouter = Backbone.Router.extend({
        routes: {
            "posts/:id" "getPost",
            "*actions": "defaultRoute" //Backbone首先会尝试匹配上面的路由
        }
    });  
    //初始化路由器   
    var app_router = new AppRouter;
    app_router.on("route:getPost",function(id){
        //注意到路由定义中的变量被传递到了这里
        alert("Get post number " + id);
    });
    app_router.on("route:defaultRoute",function(actions){
        alert(actions);
    });
    //开启Backbone的history是一个必要的步骤   
    Backbone.history.start();
</script>

动态路由中的”:params”和”*splats”

Backbone在实现路由时使用两种类型的变量。首先是”:params”,它将会匹配斜杠之间的任何URL内容。然后是”splats”,它将会匹配URL中的任何数字内容。注意到由于一个”splat”的自身属性,虽然它能匹配任何及所有内容但是它总是会匹配URL中的最后一个变量。

路由中定义的任何”*splats”或者”:params”都将作为参数被传递到相关联的函数中,一个被定义为”/:route/:action”的路由将会传递两个参数(”route”和”action”)到回调函数中。

下面是一个使用”:params”和”*splats”的例子:

route:{
    "posts/:id" : "getPost",
    //<a href="http://example.com/#/posts/121">Example</a>

    "download/*path": "downloadFile",
    //<a href="http://example.com/#/download/user/images/hey.gif">Download</a>



    ":route/:action": "loadView",
    //<a href="http://example.com/#/dashboard/graph">Load Route</a>
},

app_router.on("route:getPost",function(id){
        alert(id); //121
});
app_router.on("route:downloadFile",function(path){
        alert(path); // user/images/hey.gif
});
app_router.on("route:loadView",function(route,action){
        alert(route + "_" + action); //dashboard_graph
});

路由的作用很大,在实际开发中你的应用应当包含很多路由。如果你需要实现SEO,在Google中搜索”google seo hashbangs”。你也可以查看Seo Server。


本文参考自开源文档Backbone tutorial,原文地址http://backbonetutorials.com/