zoukankan      html  css  js  c++  java
  • Backbone.js之view篇(三)

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

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


    View有两个作用:

    1.监听事件

    2.展示数据


    下面简单的创建一个View:

    1. GameView= Backbone.View.extend({ 
    2.   tagName : "div", 
    3.   className: "game", 
    4.   render : function() { 
    5. // code for rendering the HTML for the view
    6.   } 
    7. }); 

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

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

    更全面的示例:

            var DocumentView = Backbone.View.extend({

             events: { 

    1. "dblclick"                : "open", 
    2. "click .icon.doc"         : "select", 
    3. "contextmenu .icon.doc"   : "showMenu", 
    4. "click .show_notes"       : "toggleNotes", 
    5. "click .title .lock"      : "editAccessLevel", 
    6. "mouseover .title .date"  : "showTooltip"
    7.   }, 
    8.   render: function() { 
    9.     $(this.el).html(this.template(this.model.toJSON())); 
    10. return this; 
    11.   }, 
    12.   open: function() { 
    13.     window.open(this.model.get("viewer_url")); 
    14.   }, 
    15.   select: function() { 
    16. this.model.set({selected: true}); 
    17.   }, 
    18.   ... 
    19. }); 

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

    本文引用:http://blog.csdn.net/feng88724/article/details/7290338

  • 相关阅读:
    Docker 安装 Logstash
    Docker 安装 Kibana
    go命令行参数
    小程序 表单提交
    小程序picker日历
    小程序,验证码倒计时效果
    flex图片垂直居中
    小程序单选框样式
    wechat-wxparse 使用
    小程序Banner跳转
  • 原文地址:https://www.cnblogs.com/yichengbo/p/2621196.html
Copyright © 2011-2022 走看看