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());
});