Backbone

最新推荐文章于 2024-07-02 21:05:43 发布

紫冰Nan

最新推荐文章于 2024-07-02 21:05:43 发布

阅读量448

点赞数

分类专栏： backbone

本文链接：https://blog.csdn.net/NN_nan/article/details/62217688

版权

backbone 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

View

Backbone 的 Views 用来接收用户的操作和修改 Model 的数据，另外通过 render 来展示数据。实际上，在MVC框架中，它更像是Controller。

View有两个作用：

监听事件
展示数据

下面简单的创建一个View：

var GameView= Backbone.View.extend({  
    el:'#menuTree',
    tagName : "div",
    className: "game",
    render : function() {  
        this.el.innerHTML = this.model.get('name');  
        //Or the jQuery way  
        $(this.el).html(this.model.get('name'));  
    },
    events: {  
        "dblclick"                : "open",
        "click .icon.doc"         : "select",
    },
    open: function() {  
        window.open(this.model.get("viewer_url"));  
    },  

    select: function() {  
        this.model.set({selected: true});  
    }

    });

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

AppView = Backbone.View.extend({});
var appView=new AppView();

所以此处的this指向我们new的实例（例如var appView=new AppView(),则this指向appView）

new AppView进行的操作其实是Backbone.Model.apply(this,arguments) ,也就是说我们实例化appView的时候其实是调用Backbone.Model

Router

两种路由取值的方法

  <!DOCTYPE HTML>
  <html lang="en-US">
  <head>
      <meta charset="UTF-8">
      <title>backbone</title>
      <script src="app/jquery-1.8.1.min.js"></script>
      <script src="app/underscore-min.js"></script>
      <script src="app/backbone-min.js"></script>
      <script>
     (function($) {
         var AppRouter = Backbone.Router.extend({
             routes: {
                 "/posts/:id": "getPost",
                 "*actions": "defaultRoute"
             },

             //匹配/posts/:id
             getPost: function(id) {
                 console.log(id);
             },

             //匹配所有url
             defaultRoute: function(actions) {
                 if (actions) {
                     console.log(actions);
                 }
             }
         });

         var app_router = new AppRouter;
         Backbone.history.start();
     })(jQuery);
     </script>
 </head>
 <body>
     <p><a href="#actions">testActions</a></p>
     <p><a href="#/posts/120">Post 120</a></p>
 </body>
 </html>