backbone学习笔记：1最简单的View

时间 2019-12-13

标签 backbone 学习笔记最简单 view 繁體版

原文原文链接

用duo等工具实现文件模块化后，引入Backbone来增强项目的MVC结构。
官方教程，是自上而下的从概念来描述原理，适合有基础的同窗学习，但作为由浅入深的学习路径，仍是须要本身手动一步一步学习。html

本文参考了这个简易教程，但因为backbone后期版本变化，针对原文内容有修改。jquery

从View开始提及

传统上用jQuery操做DOM，就相似C语言中的goto语句，随着项目复杂度增大，会愈来愈难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源不少，就不展开。咱们直接用代码来操练。git

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Backbone</title>
</head>

<body>
    <div class="wrapper"></div>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/underscore-min.js"></script>
    <script src="js/lib/backbone-min.js"></script>
    <script src="build/x.js"></script>
</body>
</html>

其中，x.js是用duo生成后的js。文件中引用的几个js，均可以从百度静态资源库中下载到github

1.js

var ListView = Backbone.View.extend({
  //el: $('.wrapper'),

  // 初始化函数，new时，backbone会自动调用
  initialize: function() {
    this.render();
  },

  // 真正把修改操做同步到浏览器中
  render: function() {
    this.$el.append("<ul><li>Hello techfellow!</li></ul>");
  }
});

var listView = new ListView({el: $('.wrapper')});

执行：chrome

$duo 1.js

知识点说明

el：表示该View所表明的DOM元素，在render函数中，会同步到DOM操做中去。浏览器
initialze：调用new时，会触发的函数调用，相似构造函数。app
render：触发DOM操做，浏览器会渲染模块化
最后一句，说明在new时，能够传递参数函数

疑惑

在做者的文档中，有一句工具

If the element already exists in the page, you can set el as a CSS selector that matches the element.
el: '.wrapper'

即：若是写成 new ListView({el: '.wrapper'})也是能够的。
但考虑到el自己的含义，仍是加上$更清晰些。

$el和$()

$(this.el) 等价于 this.$el
$(this.el).find('.wrapper') 等价于 this.$('.wrapper')

setElement

若是想修改el内容，包括值和绑定事件，可使用setElement。下面这个例子中，setElement不单单把el的引用从button1改成button2，连click事件也同步修改过去了。

// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
      events: {
        click: function(e) {
          console.log(view.el === e.target);
        }
      }
    });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true