backbone學習筆記：1最簡單的View 詳情 - backbone.js,mvc techfellow 博客

用duo等工具實現文件模塊化後，引入Backbone來加強項目的MVC結構。
官方教程，是自上而下的從概念來描述原理，適合有基礎的同學學習，但做為由淺入深的學習路徑，還是需要自己手動一步一步學習。

本文參考了這個簡易教程，但由於backbone後期版本變化，針對原文內容有修改。

從View開始説起

傳統上用jQuery操作DOM，就類似C語言中的goto語句，隨着項目複雜度增大，會越來越難以維護。
關於MVC（以及後續的MVP，MVVM），網上資源很多，就不展開。我們直接用代碼來操練。

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，都可以從百度靜態資源庫中下載到

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

執行：

$duo 1.js

知識點説明

el：表示該View所代表的DOM元素，在render函數中，會同步到DOM操作中去。
initialze：調用new時，會觸發的函數調用，類似構造函數。
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

techfellow 博客

techfellow 博客

博客 / 詳情