Backbone系列：Model的学习

Model的学习

本章通过完成单向数据绑定的demo，以此学习Backbone的Model模块
在线demo：单向数据绑定

设置属性值

我们可以在构建Model类的时候，定义其属性值。

var Echo = Backbone.Model.extend({
defaults: {
word: '请输入'
},
initialize: function () {
var that = this;
alert(that.get('word'));
}
});
var echo = new Echo();

另外，我们也可以在实例化Model时，传入对象，对象中的属性会成为Model的属性

var Echo = Backbone.Model.extend({
initialize: function () {
var that = this;
alert(that.get('word'));
}
});
var echo = new Echo({word: '请输入'});

Model提供get和set方法，我们能使用他们获取和设置Model的属性值

var Echo = Backbone.Model.extend({
defaults: {
word: '请输入'
},
initialize: function () {
var that = this;
// 通过set可以改变一个或多个model属性的值
that.set('word', '通过set改变model的属性值');
// 通过get能获取属性的值
alert(that.get('word'));
}
});
var echo = new Echo();

监听Model的改变

Backbone中所有的属性都绑定了监听，用来监测他们的变化。所以我们可以在initialize里绑定对应的处理函数，来监听的"word"属性的改变

var Echo = Backbone.Model.extend({
defaults: {
word: '请输入'
},
initialize: function () {
var that = this;
// 当name属性被更新时触发
// API为"change:[attribute]" (model, value, options)
that.on('change:word', function(model) {
alert('属性word被改变');
})
}
});
var echo = new Echo();
echo.set('word', '哈哈');

所以我们定义一个输入框<input>，一个显示输入框内容的<p>

<input class="input" type="text">
<p>你输入的是：<span class="type"></span></p>

然后监听输入框的keyup事件，每次输入改变时同步改变Model的属性。而Model的属性的改变会触发显示内容的改变，最终实现改变输入框内容，显示的内容同步改变的单向数据绑定

var Echo = Backbone.Model.extend({
defaults: {
word: '请输入'
},
initialize: function () {
var that = this,
word = that.get('word');
$('.input').val(word);
$('.type').text(word);
// 当name属性被更新时触发
// API为"change:[attribute]" (model, value, options)
that.on('change:word', function(model, value) {
$('.type').text(value);
})
}
});
var echo = new Echo();
// 为输入框绑定keyup事件，每次输入时，改变echo属性word的值
$('.input').on('keyup', function(e) {
echo.set('word', $(this).val());
});

与View配合

进一步，我们可以用View生成html，配合Model。

首先把原有的输入框<input>元素和展现的<p>元素放在模板里，再定义一个View插入的容器元素

<div class="container"></div>
<script type="text/template" class="template">
<input class="input" type="text" value="<%= word %>">
<p>你输入的是：<span class="type"><%= word %></span></p>
</script>

接着定义View类，这样就能把编译后的html插入页面中

var View = Backbone.View.extend({
el: $('.container'),
initialize: function() {
this.render();
},
render: function() {
var template = _.template($('.template').html());
var word = '请输入';
// 因为定义时使用jquery对象，所以这里是$el
this.$el.html(template({word : word}));
}
});

因为数据是通过Model类（即echo的实例）绑定的，所以我们可以在实例化View类的时候，把模板的实例注册到View中。最终实现View与Model的配合

var Echo = Backbone.Model.extend({
defaults: {
word: '请输入'
},
initialize: function () {
// 当name属性被更新时触发
// API为"change:[attribute]" (model, value, options)
this.on('change:word', function(model, value) {
$('.type').text(value);
})
}
});
var echo = new Echo();
var View = Backbone.View.extend({
el: $('.container'),
initialize: function() {
this.render();
},
render: function() {
var template = _.template($('.template').html());
var word = '请输入';
// 因为定义时使用jquery对象，所以这里是$el
this.$el.html(template({word : word}));
}
});
// new View([options])
// 其中传入直接注册到视图中去：model, collection,el等
var view = new View({model: echo});
// 为输入框绑定keyup事件，每次输入时，改变echo属性word的值
$('.input').on('keyup', function(e) {
echo.set('word', $(this).val());
});