Backbone入门（View,Controller）

最新推荐文章于 2020-07-19 22:47:04 发布

原创最新推荐文章于 2020-07-19 22:47:04 发布 · 9.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#function #search #正则表达式 #events #mvc #query

Backbone 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Backbone.js框架中视图(View)的作用及其如何通过监听事件和展示数据参与MVC架构。通过具体示例展示了如何定义View及其实现render方法，并讲解了Controller(现为Router)如何利用路由处理不同URL片段。

View

Backbone 的 Views 用来接收用户的操作和修改 Model 的数据，另外通过 render 来展示数据.

实际上，在MVC框架中，它更像是Controller。

View有两个作用：

1.监听事件

2.展示数据

下面简单的创建一个View：

GameView= Backbone.View.extend({
tagName : "div",
className: "game",
render : function() {
// code for rendering the HTML for the view
}
});

下面让我们看看render部分应该怎么写。如下：

render : function() {
this.el.innerHTML = this.model.get('name');
//Or the jQuery way
$(this.el).html(this.model.get('name'));
}

更全面的示例：

var DocumentView = Backbone.View.extend({
 
  events: {
    "dblclick"                : "open",
    "click .icon.doc"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover .title .date"  : "showTooltip"
  },
 
  render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  },
 
  open: function() {
    window.open(this.model.get("viewer_url"));
  },
 
  select: function() {
    this.model.set({selected: true});
  },
 
  ...
 
});

events部分是监听的事件，下面的open、select方法是事件对应的处理。

Controller（新版为Router）

controller 将不同的以#开头的 URL 片段绑定到不同的函数，实现服务器端 MVC 模型中的 router 一样的功能.

简单使用：

var Hashbangs = Backbone.Controller.extend({
routes: {
"!/": "root",
"!/games": "games",
},
root: function() {
// Prep the home page and render stuff
},
games: function() {
// Re-render views to show a collection of books
},
});

!/games 就会映射到games函数，浏览器地址栏中会变成 domain/#!/games

值得提出的是 Backbone 的 router 也支持正则表达式的匹配

var Workspace = Backbone.Controller.extend({
 
  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/kiwis
    "search/:query/p:page": "search"   // #search/kiwis/p7
  },
 
  help: function() {
    ...
  },
 
  search: function(query, page) {
    ...
  }
 
});