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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。