GVKun编程网logo

javascript – 在backbone.js中使用bind传递上下文（js bind传参）

15

这篇文章主要围绕javascript–在backbone.js中使用bind传递上下文和jsbind传参展开，旨在为您提供一份详细的参考资料。我们将全面介绍javascript–在backbone.j

这篇文章主要围绕javascript – 在backbone.js中使用bind传递上下文和js bind传参展开，旨在为您提供一份详细的参考资料。我们将全面介绍javascript – 在backbone.js中使用bind传递上下文的优缺点，解答js bind传参的相关问题，同时也会为您带来Backbone.js 1.2.2 发布，JavaScript 的 MVC 框架、backbone.js – 如何根据模型javascript数组属性正确显示Backbone牵线木偶集合视图？、JavaScript MVC 框架 backbone.js 初探、Javascript MVC框架Backbone.js详解_javascript技巧的实用方法。

本文目录一览：

javascript – 在backbone.js中使用bind传递上下文（js bind传参）

javascript – 在backbone.js中使用bind传递上下文（js bind传参）

我希望我的面板在单击时重新渲染.

但是,当我执行单击时,我得到以下内容：

Uncaught TypeError: Cannot call method 'get' of undefined

看来,我正在记录的“这个”实际上就是模型本身：

_callbacks: Object
_changed: true
_escapedAttributes: Object
_prevIoUsAttributes: Object
attributes: Object
cid: "c0"
collection: r.d
id: "f5589ba4-a0aa-dd86-9697-30e532e0f975"
__proto__: n

我无法通过将我的上下文传递给model.bind来弄清楚为什么不能保留适当的“this”.

这是我的代码：

// Models
window.Panel = Backbone.Model.extend({

    defaults: function(){
        return {
            flipped: false,};
    },toggle: function(){
        this.save({flipped: !this.get("flipped")});
    },});


// Collections

window.PanelList = Backbone.Collection.extend({

    model:Panel,localStorage: new Store("panels"),flipped: function(){
        return this.filter(function(panel){ return panel.get("flipped"); })
    }   
});


// Global collection of Panels
window.Panels = new PanelList;

// Panel View

window.PanelView = Backbone.View.extend({ 

    tagName: 'div',template: _.template($("#panel-template").html()),events: {
        "click" : "toggle"
    },initialize: function(){
        this.model.bind("change",this.render,this) 
        $(this.el).html(this.template(this.model.toJSON()));
    },render: function(){    
        console.log(this);
        var flipped = this.model.get("flipped")
        if (flipped){
           $(this.el).addClass("flip"); 
        } else{
           $(this.el).removeClass("flip"); 
        }           
        return this   
    },toggle: function(){
        this.model.toggle(); 
    }
});

解决方法

这样做的主干方法是使用下划线提供的_.bindAll(…)函数： 
initialize: function(){
    _.bindAll(this,"render");
    this.model.bind("change",this.render) 
    $(this.el).html(this.template(this.model.toJSON()));
}

_.bindAll做了什么记录here,但它基本上是为此目的而构建的.如果要在对象的所有函数中正确设置此项,则可以在没有函数列表的情况下调用_.bindAll(this).在我的大多数视图中,我倾向于使用此全局绑定函数.

Backbone.js 1.2.2 发布，JavaScript 的 MVC 框架

Backbone.js 1.2.2 发布，JavaScript 的 MVC 框架

Backbone.js 1.2.2 发布，此版本更新内容如下：

  • Collection methods find, filter, reject, every, some, and partition can now take a model-attributes-style predicate:  this.collection.reject({user: ''guybrush''}).

  • Backbone Events once again supports multiple-event maps (obj.on({''error change'': action})). This was a previously undocumented feature inadvertently removed in 1.2.0.

  • Added Collection#includes as an alias of Collection#contains and as a replacement for Collection#include in Underscore.js >= 1.8.

下载：

  • 开发版：http://backbonejs.org/backbone.js

  • 稳定版：http://backbonejs.org/backbone-min.js

  • 测试版：https://raw.github.com/jashkenas/backbone/master/backbone.js   

Backbone.js 是一种重量级javascript  MVC 应用框架,通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过 Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.

backbone.js – 如何根据模型javascript数组属性正确显示Backbone牵线木偶集合视图？

backbone.js – 如何根据模型javascript数组属性正确显示Backbone牵线木偶集合视图？

*更新：请参阅下面最后一个代码块中的最终答案代码.*

目前,我在集合视图中显示集合时遇到问题.该集合是现有模型的属性,如此(伪代码)

ApplicationVersion { Id: 1,VersionName: "",ApplicationCategories[] }

所以基本上ApplicationVersion有一个名为ApplicationCategories的属性,它是一个javascript数组.目前,当我渲染与ApplicationCategories相关联的集合视图时,不会呈现任何内容.如果我在Chrome的javascript调试器中调试,似乎尚未填充类别(因此我假设还没有提取ApplicationVersion).这是我目前的代码

ApplicationCategory模型,集合和视图

ApplicationModule.ApplicationCategory = Backbone.Model.extend({
    urlRoot:"/applicationcategories"
});

ApplicationModule.ApplicationCategories = Recruit.Collection.extend({
    url:"/applicationcategories",model:ApplicationModule.ApplicationCategory,initialize: function(){
        /*
         * By default backbone does not bind the collection change event to the comparator
         * for performance reasons.  I am choosing to not preoptimize though and do the
         * binding.  This may need to change later if performance becomes an issue.
         * See https://github.com/documentcloud/backbone/issues/689
         *
         * Note also this is only nescessary for the default sort.  By using the
         * SortableCollectionMixin in other sorting methods,we do the binding
         * there as well.
         */
        this.on("change",this.sort);
    },comparator: function(applicationCategory) {
        return applicationCategory.get("order");
    },byName: function() {
        return this.sortedBy(function(applicationCategory) {
            return applicationCategory.get("name");
        });
    }
});

_.extend(ApplicationModule.ApplicationCategories.prototype,SortableCollectionMixin);

ApplicationModule.ApplicationCategoryView = Recruit.ItemView.extend({
    template:"application/applicationcategory-view-template"
});

ApplicationModule.ApplicationCategoriesView = Recruit.CollectionView.extend({
    itemView:ApplicationModule.ApplicationCategoryView
});

ApplicationCategory模板

<section id="<%=name%>">
   <%=order%>
</section>

ApplicationVersion模型,集合和视图

ApplicationModule.ApplicationVersion = Backbone.Model.extend({
    urlRoot:"/applicationversions"
});

ApplicationModule.ApplicationVersions = Recruit.Collection.extend({
    url:"/applicationversions",model:ApplicationModule.ApplicationVersion
});

ApplicationModule.ApplicationVersionLayout = Recruit.Layout.extend({
    template:"application/applicationversion-view-template",regions: {
        applicationVersionHeader: "#applicationVersionHeader",applicationVersionCategories: "#applicationVersionCategories",applicationVersionFooter: "#applicationVersionFooter"
    }
});

ApplicationModule.ApplicationVersionController = {
    showApplicationVersion: function (applicationVersionId) {
        ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId});

        var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({
            model:ApplicationModule.applicationVersion
        });

        ApplicationModule.applicationVersion.fetch({success: function(){
            var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({
                collection: ApplicationModule.applicationVersion.application_categories
            });
            applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories);
        }});

        // Fake server responds to the request
        ApplicationModule.server.respond();

        Recruit.layout.main.show(applicationVersionLayout);
    }
};

这是我的ApplicationVersion模板

<section id="applicationVersionOuterSection">
<header id="applicationVersionHeader">
    Your Application Header <%= id %>
</header>
<section id="applicationVersionCategories">
</section>
<footer id="applicationVersionFooter">
     Your footer
</footer>

有一点需要注意我正在使用Sinon来模拟我的服务器响应,但我不认为这会导致问题,因为它正在响应信息,因为我期望通过javascript调试器查看(就像我说它显示的是ApplicationVersion id正确).如果它有帮助,我也可以提供此代码

它当前正在显示应用程序版本ID(模板中的id),因此我知道它正在为正常属性正确获取数据,它只是不呈现我的ApplicationCategories javascript数组属性.

因此,最终我对ApplicationVersion的获取成功具有约束力,然后为ApplicationCategories设置视图.因为这不像我预期的那样工作,我想知道是否有更好的方法来创建这个集合视图？

谢谢你的帮助

更新：Derek Bailey带领我的工作代码示例.

ApplicationModule.ApplicationVersionController = {
    showApplicationVersion: function (applicationVersionId) {
        ApplicationModule.applicationVersion = new ApplicationModule.ApplicationVersion({id : applicationVersionId});

        var applicationVersionLayout = new Recruit.ApplicationModule.ApplicationVersionLayout({
            model:ApplicationModule.applicationVersion
        });

        ApplicationModule.applicationVersion.fetch();

        // Fake server responds to the request
        ApplicationModule.server.respond();

        Recruit.layout.main.show(applicationVersionLayout);

        var applicationVersionCategories = new Recruit.ApplicationModule.ApplicationCategoriesView({
            collection: new Backbone.Collection(ApplicationModule.applicationVersion.get('application_categories'))
        });
        applicationVersionLayout.applicationVersionCategories.show(applicationVersionCategories);
    }
};

解决方法

Marionette的CollectionView需要一个有效的Backbone.Collection,而不是一个简单的数组.在将数组传递给视图时,需要从数组中创建Backbone.Collection： 
new MyView({
  collection: new Backbone.Collection(MyModel.something.ArrayOfThings)
});

JavaScript MVC 框架 backbone.js 初探

JavaScript MVC 框架 backbone.js 初探

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代


什么是 backbone

backbone 不是脊椎骨，而是帮助开发重量级的 javascript 应用的框架。

主要提供了 3 个东西：1、models (模型) 2、collections (集合) 3、views (视图)

backbone.js 文件本身很小，压缩后只有 5.3KB，作为一个框架级别的核心 JS 文件，这个数字很可怕。

除此之外，这个 JS 还必须依赖于另一个 JS 文件：underscore.js (包含许多工具方法，集合操作，js 模板等等)。

简介

用 Backbone.Model 表示应用中所有数据，models 中的数据可以创建、校验、销毁和保存到服务端。

当 models 中值被改变时自动触发一个 "change" 事件、所有用于展示 models 数据的 views 都会侦听到这个事件，然后进行重新渲染。

Backbone.Collection 和我们平时接触的 JAVA 集合类相似，具有增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存 models 的集合类。

Backbone.View 中可以绑定 dom el 和客户端事件。页面中的 html 就是通过 views 的 render 方法渲染出来的，当新建一个 view 的时候通过要传进一个 model 作为数据，例如：

Js 代码：

    var view = new EmployeeView({model:employee});

也就是说 model 就是以这种方式和 view 进行关联的。

特点

创建 models 或者 views 的语法：extends，相当于类继承

models 的创建，销毁，校验等一系列改变都会触发相应的事件

示例

需求：用 backbone.js 和 jquery 实现一个可编辑的员工信息表格。

功能：1、录入员工信息。2、删除员工信息。3、双击表格可对员工信息进行修改。4、能对员工信息进行有效性校验。5、能对员工信息进行持久化。

设计：

用 Employee 类 (继承自 Backbone.Model) 表示员工信息，包含 ID、姓名、性别、年龄和职位字段。

Js 代码：

    window.Employee = Backbone.Model.extend({
    // 模型值校验
    validate:function(attrs){
    for(var key in attrs){
    if(attrs[key] == ''''){
    return key + "不能为空";
    }//www.sctarena.com
    if(key == ''age'' && isNaN(attrs.age)){
    return "年龄必须是数字";
    }
    }
    }
    });

声明 Employee 类之后就可以新增一个 Employee 的示例对象了：

Js 代码：

    var employee = new Employee();

Employee 类中不必声明 ID、姓名等业务字段。当需要给 employee 设置这些信息时候，只需要调用

Js 代码：

    employee.set({''id'':1,''name'':''Jason''});

当然，如果需要对 employee 的信息进行校验，需要给 Employee 类配置一个 validate 方法，这个方法的参数 attrs 就是 set 进去的 json 数据。这样，当 employee 里面的数据每次发生改变的时候都会先调用这个 validate 方法。

Model 类定义好之后就可以开始定义集合类了，在集合类里面可以对里面的每个 Model 进行增加，删除等一系列操作，还可以调用 fetch 方法从 server 端获取集合的初始值。

Js 代码：

    window.EmployeeList = Backbone.Collection.extend({
    model : Employee,
    // 持久化到本地数据库
    localStorage: new Store("employees"),
    });
    window.Employees = new EmployeeList();
成都 java 培训
设置 localStorage 属性后 Employees 里面的数据自动会同步保存到本地数据库里面，每当调用 Employees.fetch () 后又会从 localStorage 里面恢复数据。

View 类主要负责一切和界面相关的工作，比如绑定 html 模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等：

Js 代码：

    window.EmployeeView = Backbone.View.extend({
    tagName : ''tr'',
    template : _.template($(''#item-template'').html()),
    events : {
    "dblclick td" : "edit",
    "blur input,select" : "close",
    "click .del" : "clear",
    },
    initialize : function(){
    // 每次更新模型后重新渲染
    this.model.bind(''change'', this.render, this);
    // 每次删除模型之后自动移除 UI
    this.model.bind(''destroy'', this.remove, this);
    },
    setText : function(){
    var model = this.model;
    this.input = $(this.el).find(''input,select'');
    this.input.each(function(){
    var input = $(this);
    input.val(model.get(input.attr("name")));
    });
    },
    close: function(e) {
    var input = $(e.currentTarget);
    var obj = {};
    obj[input.attr(''name'')] = input.val();
    this.model.save(obj);
    $(e.currentTarget).parent().parent().removeClass("editing");
    },
    edit : function(e){
    // 给 td 加上 editing 样式
    $(e.currentTarget).addClass(''editing'').find(''input,select'').focus();
    },
    render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    // 把每个单元格的值赋予隐藏的输入框
    this.setText();
    return this;
    },
    remove: function() {
    $(this.el).remove();
    },
    clear: function() {
    this.model.destroy();
    }
    });

这个类里面的代码比较多，但主要和界面的渲染有关。一个 EmployeeView 对象对应 table 里面的一个 tr 元素。每次 new 一个 EmployeeView 对象的时候都会先调用 initialize 方法，这个方法里面绑定的事件确保了 tr 元素对应的 model 值每次发生改变或者被删除时都会同步到界面。也就是说当每次操作界面对数据进行修改后都是先把当前的变更保存到 view 绑定的 model 对象里面，然后 model 里面的事件机制会自动触发一个 "change" 事件对界面进行修改。

template 中使用的方法_.template ($(''#item-template'').html ()) 是前面提到的 underscore.js 中提供一个工具方法，可以通过界面的 HTML 模板和一个 JSON 生成动态的 HTML，说白了就是把 JSON 里面的值填充到 HTML 模板中对应的占位符里面去，牛 X 的是 HTML 模板里面支持一些常用的逻辑表达式如 if,else,foreach 等：

Html 代码：

    <script type="text/template" id="item-template">
    <td><%= eid %></td>
    <td>
    <div><%= username %></div>
    <div><inputname="username"></input></div>
    </td>
    <td>
    <div><%= sex=="1" ? "女":"男" %></div>
    <div>
    <select name="sex">
    <option value="0"> 男 </option><option value="1"> 女 </option>
    </select>
    </div>
    </td>
    <td>
    <div><%= age %></div>
    <div>
    <inputname="age"></input>
    </div>
    </td>
    <td>
    <div><%= position %></div>
    <div>
    <inputname="position"></input>
    </div>
    </td>
    <td>
    <a href="#"> 删除 </a>
    </td>
    </script>

setText 方法主要负责把 model 里面的数据设置到每个 tr 里面的隐藏输入域里面。

close 方法被绑定到了 input 和 select 元素的 blur 事件中。当用户对单元格数据进行修改后都会把鼠标点击到界面其他地方然后输入框会自动隐藏并且把修改的数据显示在表格上面。close 方法首先从当前被编辑的元素中拿到最新值，然后封装成一个对象，调用 model 的 save 方法后首先执行 model 的 validate 方法，如果校验通过则保存到本地存储并触发 "change" 事件。

最后还需要一个主界面 View，这个 View 主要绑定了界面中的录入表单的 “增加” 按钮事件，Employees 的相关事件以及页面初始化时从本地存储中恢复数据：

Js 代码：

    window.AppView = Backbone.View.extend({
    el : $("#app"),
    events : {
    "click .#add-btn" : "createOnEnter"
    },
    // 绑定 collection 的相关事件
    initialize: function() {
    Employees.bind(''add'', this.addOne, this);
    // 调用 fetch 的时候触发 reset
    Employees.bind(''reset'', this.addAll, this);
    Employees.fetch();
    },
    createOnEnter : function(e) {
    var employee = new Employee();
    var attr = {};
    $(''#emp-form input,#emp-form select'').each(function(){
    var input = $(this);
    attr[input.attr(''name'')] = input.val();
    });
    employee.bind(''error'',function(model,error){
    alert(error);
    });
    //set 方法中会自动调用 model 的 validate 方法进行校验，如果不通过则返回 false
    if(employee.set(attr)){
    Employees.create(employee);
    }
    },
    addOne : function(employee){
    employee.set({"eid":employee.get("eid")||Employees.length});
    employee.bind(''error'',function(model,error){
    alert(error);
    });
    var view = new EmployeeView({model:employee});
    $(".emp-table tbody").append(view.render().el);
    },
    addAll : function(){
    Employees.each(this.addOne);
    }
    });

initialize 方法中绑定了 Employees 的 add 和 reset 事件，也就是说每当往 Employees 中添加一个 model 的时候都会调用 AppView 的 addOne 方法，这个方法主要绑定了 model 的 error 事件以及把 EmployeeView 生成的 html 插入到界面中的合适位置。

OK，万事俱备，只欠启动，整个应用的初始化方法就是 AppView 的 initialize 方法，因此只需要新建一个 AppView 就可以了：

Js 代码

    window.App = new AppView();

整个示例的 JS 代码很少，加上注释只有 100 行左右，感兴趣的可以下载看看。由于示例使用到了本地存储，所以不要用 IE 运行示例，你懂的。

Javascript MVC框架Backbone.js详解_javascript技巧

Javascript MVC框架Backbone.js详解_javascript技巧

随着javascript程序变得越来越复杂，往往需要一个团队协作开发，这时代码的模块化和组织规范就变得异常重要了。mvc模式就是代码组织的经典模式。

（……MVC介绍。）

（1）Model

Model表示数据层，也就是程序需要的数据源，通常使用JSON格式表示。

（2）View

立即学习“Java免费学习笔记（深入）”；

View表示表现层，也就是用户界面，对于网页来说，就是用户看到的网页HTML代码。

（3）Controller

Controller表示控制层，用来对原始数据（Model）进行加工，传送到View。

由于网页编程不同于客户端编程，在MVC的基础上，JavaScript社区产生了各种变体框架MVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）等等，有人就把所有这一类框架的各种模式统称为MV*。

框架的优点在于合理组织代码、便于团队合作和未来的维护，缺点在于有一定的学习成本，且限制你只能采取它的写法。

Backbone的加载

复制代码 代码如下:







Backbone.View

基本用法

Backbone.View方法用于定义视图类。

复制代码 代码如下:

var AppView = Backbone.View.extend({
  render: function(){
    $(''main'').append(''

一级标题

'');
  }
});

上面代码通过Backbone.View的extend方法，定义了一个视图类AppView。该类内部有一个render方法，用于将视图放置在网页上。

使用的时候，需要先新建视图类的实例，然后通过实例，调用render方法，从而让视图在网页上显示。

复制代码 代码如下:

var appView = new AppView();
appView.render();

上面代码新建视图类AppView的实例appView，然后调用appView.render，网页上就会显示指定的内容。

新建视图实例时，通常需要指定Model。

复制代码 代码如下:

var document = new Document({
  model: doc
});

initialize方法

视图还可以定义initialize方法，生成实例的时候，会自动调用该方法对实例初始化。

复制代码 代码如下:

var AppView = Backbone.View.extend({
  initialize: function(){
    this.render();
  },
  render: function(){
    $(''main'').append(''

一级标题

'');
  }
});
var appView = new AppView();

上面代码定义了initialize方法之后，就省去了生成实例后，手动调用appView.render()的步骤。

el属性，$el属性

除了直接在render方法中，指定“视图”所绑定的网页元素，还可以用视图的el属性指定网页元素。

复制代码 代码如下:

var AppView = Backbone.View.extend({
  el: $(''main''),
  render: function(){
    this.$el.append(''

一级标题

'');
  }
});

上面的代码与render方法直接绑定网页元素，效果完全一样。上面代码中，除了el属性，还是$el属性，前者代表指定的DOM元素，后者则表示该DOM元素对应的jQuery对象。

tagName属性，className属性

如果不指定el属性，也可以通过tagName属性和className属性指定。

复制代码 代码如下:

var Document = Backbone.View.extend({
  tagName: "li",
  className: "document",
  render: function() {
   // ...
  }
});

template方法

视图的template属性用来指定网页模板。

复制代码 代码如下:

var AppView = Backbone.View.extend({
      template: _.template("

Hello

"),
});


上面代码中，underscore函数库的template函数，接受一个模板字符串作为参数，返回对应的模板函数。有了这个模板函数，只要提供具体的值，就能生成网页代码。
复制代码 代码如下:

var AppView = Backbone.View.extend({
      el: $(''#container''),
      template: _.template("

Hello

"),
      initialize: function(){
        this.render();
      },
      render: function(){
        this.$el.html(this.template({who: ''world!''}));
      }
});


上面代码的render就调用了template方法，从而生成具体的网页代码。

实际应用中，一般将模板放在script标签中，为了防止浏览器按照JavaScript代码解析，type属性设为text/template。

复制代码 代码如下:



可以使用下面的代码编译模板。
复制代码 代码如下:

window.templates = {};
var $sources = $(''script[type="text/template"]'');
$sources.each(function(index, el) {
    var $el = $(el);
    templates[$el.data(''name'')] = _.template($el.html());
});

events属性

events属性用于指定视图的事件及其对应的处理函数。

复制代码 代码如下:

var Document = Backbone.View.extend({
  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  }
});

上面代码中一个指定了三个CSS选择器的单击事件，及其对应的三个处理函数。

listento方法

listento方法用于为特定事件指定回调函数。

复制代码 代码如下:

var Document = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  }
});

上面代码为model的change事件，指定了回调函数为render。

remove方法

remove方法用于移除一个视图。

复制代码 代码如下:

updateView: function() {
  view.remove();
  view.render();
};

子视图（subview）

在父视图中可以调用子视图。下面就是一种写法。

复制代码 代码如下:

render : function (){
    this.$el.html(this.template());
    this.child = new Child();
    this.child.appendTo($.(''.container-placeholder'').render();
}

Backbone.Router

Router是Backbone提供的路由对象，用来将用户请求的网址与后端的处理函数一一对应。

首先，新定义一个Router类。

复制代码 代码如下:

Router = Backbone.Router.extend({
    routes: {
    }
});

routes属性

Backbone.Router对象中，最重要的就是routes属性。它用来设置路径的处理方法。

routes属性是一个对象，它的每个成员就代表一个路径处理规则，键名为路径规则，键值为处理方法。

如果键名为空字符串，就代表根路径。

复制代码 代码如下:

routes: {
        '''': ''phonesIndex'',
},
phonesIndex: function () {
        new PhonesIndexView({ el: ''section#main'' });
}
星号代表任意路径，可以设置路径参数，捕获具体的路径值。
复制代码 代码如下:

var AppRouter = Backbone.Router.extend({
    routes: {
        "*actions": "defaultRoute"
    }
});
var app_router = new AppRouter;
app_router.on(''route:defaultRoute'', function(actions) {
    console.log(actions);
})
上面代码中，根路径后面的参数，都会被捕获，传入回调函数。

路径规则的写法。

复制代码 代码如下:

var myrouter = Backbone.Router.extend({
  routes: {
    "help":                 "help",   
    "search/:query":        "search"
  },
  help: function() {
    ...
  },
  search: function(query) {
    ...
  }
});
routes: {
  "help/:page":         "help",
  "download/*path":     "download",
  "folder/:name":       "openFolder",
  "folder/:name-:mode": "openFolder"
}
router.on("route:help", function(page) {
  ...
});

Backbone.history

设置了router以后，就可以启动应用程序。Backbone.history对象用来监控url的变化。

复制代码 代码如下:

App = new Router();
$(document).ready(function () {
    Backbone.history.start({ pushState: true });
});

打开pushState方法。如果应用程序不在根目录，就需要指定根目录。
复制代码 代码如下:

Backbone.history.start({pushState: true, root: "/public/search/"})
Backbone.Model

Model代表单个的对象实体。
复制代码 代码如下:

var User = Backbone.Model.extend({
        defaults: {
            name: '''',
            email: ''''
        }
});
var user = new User();

上面代码使用extend方法，生成了一个User类，它代表model的模板。然后，使用new命令，生成一个Model的实例。defaults属性用来设置默认属性，上面代码表示user对象默认有name和email两个属性，它们的值都等于空字符串。

生成实例时，可以提供各个属性的具体值。

复制代码 代码如下:

var user = new User ({
    id: 1,
    name: ''name'',
    email: ''name@email.com''
});

上面代码在生成实例时，提供了各个属性的具体值。

idAttribute属性

Model实例必须有一个属性，作为区分其他实例的主键。这个属性的名称，由idAttribute属性设定，一般是设为id。

复制代码 代码如下:

var Music = Backbone.Model.extend({
    idAttribute: ''id''
});

get方法

get方法用于返回Model实例的某个属性的值。

复制代码 代码如下:

var user = new User({ name: "name", age: 24});
var age = user.get("age"); // 24
var name = user.get("name"); // "name"

set方法

set方法用于设置Model实例的某个属性的值。

复制代码 代码如下:

var User = Backbone.Model.extend({
    buy: function(newCarsName){
        this.set({car: newCarsName });
    }
});
var user = new User({name: ''BMW'',model:''i8'',type:''car''});
user.buy(''Porsche'');
var car = user.get("car"); // ‘Porsche''

on方法

on方法用于监听对象的变化。

复制代码 代码如下:

var user = new User({name: ''BMW'',model:''i8''});
user.on("change:name", function(model){
    var name = model.get("name"); // "Porsche"
    console.log("Changed my car''s name to " + name);
});
user.set({name: ''Porsche''});
// Changed my car''s name to Porsche

上面代码中的on方法用于监听事件，“change:name”表示name属性发生变化。

urlroot属性

该属性用于指定服务器端对model进行操作的路径。

复制代码 代码如下:

var User = Backbone.Model.extend({
    urlRoot: ''/user''
});

上面代码指定，服务器对应该Model的路径为/user。

fetch事件

fetch事件用于从服务器取出Model。

复制代码 代码如下:

var user = new User ({id: 1});
user.fetch({
    success: function (user){
        console.log(user.toJSON());
    }
})
上面代码中，user实例含有id属性（值为1），fetch方法使用HTTP动词GET，向网址“/user/1”发出请求，从服务器取出该实例。

save方法

save方法用于通知服务器新建或更新Model。

如果一个Model实例不含有id属性，则save方法将使用POST方法新建该实例。

复制代码 代码如下:

var User = Backbone.Model.extend({
    urlRoot: ''/user''
});
var user = new User ();
var userDetails = {
    name: ''name'',
    email: ''name@email.com''
};
user.save(userDetails, {
    success: function (user) {
        console.log(user.toJSON());
    }
})

上面代码先在类中指定Model对应的网址是/user，然后新建一个实例，最后调用save方法。它有两个参数，第一个是实例对象的具体属性，第二个参数是一个回调函数对象，设定success事件（保存成功）的回调函数。具体来说，save方法会向/user发出一个POST请求，并将{name: ‘name'', email: ‘name@email.com''}作为数据提供。

如果一个Model实例含有id属性，则save方法将使用PUT方法更新该实例。

复制代码 代码如下:

var user = new User ({
    id: 1,
    name: ''张三'',
    email: ''name@email.com''
});
user.save({name: ''李四''}, {
    success: function (model) {
        console.log(user.toJSON());
    }
});
上面代码中，对象实例含有id属性（值为1），save将使用PUT方法向网址“/user/1”发出请求，从而更新该实例。

destroy方法

destroy方法用于在服务器上删除该实例。

复制代码 代码如下:

var user = new User ({
    id: 1,
    name: ''name'',
    email: ''name@email.com''
});
user.destroy({
    success: function () {
       console.log(''Destroyed'');
    }
});

上面代码的destroy方法，将使用HTTP动词DELETE，向网址“/user/1”发出请求，删除对应的Model实例。

Backbone.Collection

Collection是同一类Model的集合，比如Model是动物，Collection就是动物园；Model是单个的人，Collection就是一家公司。

复制代码 代码如下:

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

上面代码中，Song是Model，Album是Collection，而且Album有一个model属性等于Song，因此表明Album是Song的集合。

add方法，remove方法

Model的实例可以直接放入Collection的实例，也可以用add方法添加。

复制代码 代码如下:

var song1 = new Song({ id: 1 ,name: "歌名1", artist: "张三" });
var song2 = new Music ({id: 2,name: "歌名2", artist: "李四" });
var myAlbum = new Album([song1, song2]);
var song3 = new Music({ id: 3, name: "歌名3",artist:"赵五" });
myAlbum.add(song3);

remove方法用于从Collection实例中移除一个Model实例。
复制代码 代码如下:

myAlbum.remove(1);

上面代码表明，remove方法的参数是model实例的id属性。

get方法，set方法

get方法用于从Collection中获取指定id的Model实例。

复制代码 代码如下:

myAlbum.get(2))

fetch方法

fetch方法用于从服务器取出Collection数据。

复制代码 代码如下:

var songs = new Backbone.Collection;
songs.url = ''/songs'';
songs.fetch();

Backbone.events
复制代码 代码如下:

var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
    $(''#display'').text(msg);
});
obj.trigger("show-message", "Hello World");

今天关于javascript – 在backbone.js中使用bind传递上下文和js bind传参的介绍到此结束，谢谢您的阅读，有关Backbone.js 1.2.2 发布，JavaScript 的 MVC 框架、backbone.js – 如何根据模型javascript数组属性正确显示Backbone牵线木偶集合视图？、JavaScript MVC 框架 backbone.js 初探、Javascript MVC框架Backbone.js详解_javascript技巧等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇javascript – 重复Pinterest Facebook邀请功能

下一篇简单的JavaScript拖放,无需借助库（js 拖放）

相关文章