Javascript MVC框架Backbone.js详解(2)


var AppView = Backbone.View.extend({
      el: $('#container'),
      template: _.template("<h3>Hello <%= who %><h3>"),
      initialize: function(){
        this.render();
      },
      render: function(){
        this.$el.html(this.template({who: 'world!'}));
      }
});


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

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

复制代码 代码如下:


<script type="text/template" data-name="templateName">
    <!-- template contents goes here -->
</script>


可以使用下面的代码编译模板。

复制代码 代码如下:


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);
})


上面代码中,根路径后面的参数,都会被捕获,传入回调函数。

路径规则的写法。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgsfjd.html