backbone入門系列（3）視圖

繼續用extend

Backbone.View.extend(properties, [classProperties]) 

1.var NoteView = Backbone.View.extend({})視圖默認含有el元素，內容爲div

2.在括號裏能夠設置元素內容和各類屬性

如

var noteView = Backbone.View.extend({
tagName: 'li',  // 將div改成li
className: 'item',  //設置class爲item
attributes: {
'data-role': 'list'     //其餘屬性
}
});

3.再介紹一個方法，渲染render

代碼

/**
* 模型 - Model
*/
var Note = Backbone.Model.extend({
defaults: {
title: '',
created_at: new Date()
},

initialize: function() {
console.log('新建立了一條筆記：' + this.get('title'));

this.on('change', function(model, options) {
console.log('屬性的值發生了變化');
});

this.on('change:title', function(model, options) {
console.log('title 屬性發生了變化');
});

this.on('invalid', function(model, error) {
console.log(error);
})
},

validate: function(attributes, options) {
if (attributes.title.length < 3) {
return '筆記的標題字符數要大於 3';
}
}
});

/**
* 視圖 - View
*/

var NoteView = Backbone.View.extend({
tagName: 'li',
className: 'item',
attributes: {
'data-role': 'list'
},

render: function() {//要利用模型的各個屬性，要定義render方法
this.$el.html(this.model.get('title'));//$el返回jquery對象
}
});

var note = new Note({
title: '西紅柿炒雞蛋的作法' //實例化一個模型
});

var noteView = new NoteView({ //實例化一個視圖，而且利用note模型
model: note
});

執行狀況

先執行一下render方法

4.模板功能

backbone自己不帶這個功能，可是能夠利用underscore的模板功能

接下來爲noteView這個視圖準備一個模板

 

第一步要在html文檔定義模板

<script type='text/template' id='list-template'>  //type屬性表示模板，以避免被誤覺得javascript文檔
<span> <%=title %> <small class="pull-right"><%=time %></small> </span>//輸出模型裏屬性的值
</script>

第二步在nodeview中加語句

 template: _.template(jQuery('#list-template').html()),//下劃線指underscore

改造render方法：

render: function() {
this.$el.html(this.template(this.model.attributes));
}

在瀏覽器執行

通過檢查，前面模板寫錯了，沒有找到time這個屬性，正確的應該爲

<script type='text/template' id='list-template'>
<span> <%=title %> <small class="pull-right"><%=created_at %></small> </span> //把time改成created_at
</script>

繼續執行