首頁 > web前端 > js教程 > 主體

Backbone.js框架中簡單的View視圖編寫學習筆記_基礎知識

WBOY
發布: 2016-05-16 15:15:49
原創
1055 人瀏覽過

傳統上用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 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

登入後複製

事件處理和範本解析都是前端渲染必備的工作,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}));
...
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板