首頁 > 開發者 > JavaScript

Backbone.js架構中簡單的View視圖編寫學習筆記，backbone架構

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Backbone.js架構中簡單的View視圖編寫學習筆記，backbone架構

傳統上用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時，可以傳遞參數

疑惑
如果寫成 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 elsevar button1 = $('<button></button>');var button2 = $('<button></button>');// Define a new viewvar View = Backbone.View.extend({   events: {    click: function(e) {     console.log(view.el === e.target);    }   }  });// Create a new instance of the view, applying it// to button1var view = new View({el: button1});// Apply the view to button2 using setElementview.setElement(button2);button1.trigger('click');button2.trigger('click'); // returns true

事件處理和模板解析都是前端渲染必需的工作，backbone一般把這些內容放到View裡面統一處理。
2.js

var ListView = Backbone.View.extend({ el: $('.wrapper'), events: {  'click button#add': 'addItem' }, // 初始化函數，new時，backbone會自動調用 initialize: function() {  // 用於計數  this.counter = 0;  this.render(); }, // 真正把修改操作同步到瀏覽器中 render: function() {  this.$el.append("<button id='add'>點擊添加</button><ul></ul>"); }, // event handler addItem: function() {  this.counter++;  this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)"); }});var listView = new ListView();

執行：

$duo 2.js

知識點

  • this.counter：內部使用的資料，可以initialize中初始化
  • events：聲明格式，'event selector': 'func'，這比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰許多了。

模板

在index.html中加入：

<script type="text/template" id="tplItem">  <li>Hello techfellow, <%= counter %> time(s)</li></script><!--要放在2.js前面，否則在執行時，可能遇到找不到tplItem的情況--><script src="build/2.js"></script>

在View的聲明中修改：

events: { 'click button#add': 'addItem'},template: _.template($('#tplItem').html()),

修改addItem：

addItem: function() { this.counter++; this.$('ul').append(this.template({counter: this.counter}));}

同理，這裡的模板可以替換為任何第三方模板引擎。
比如：artTemplate

var template = require('./lib/template.js');...this.$('ul').append(template('tplItem', {counter: this.counter}));...

您可能感興趣的文章:
  • 簡單瞭解Backbone.js的Model模型以及View視圖的源碼
  • 講解JavaScript的Backbone.js架構的MVC結構設計理念
  • 深入解析JavaScript架構Backbone.js中的事件機制
  • 輕量級javascript 架構Backbone使用指南
  • Backbone.js的一些提示
  • Backbone.js 0.9.2 源碼注釋中文翻譯版
  • Backbone.js的Hello World程式執行個體
  • Backbone.js中的集合詳解
  • Javascript MVC架構Backbone.js詳解
  • JavaScript的Backbone.js架構的一些使用建議整理

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More