Backbone 教程(三):Model模型

2016-11-11  本文已影响18人  bigggge

Models(模型)是任何Javascript应用的核心,包括数据交互及与其相关的大量逻辑: 转换、验证、计算属性和访问控制。你可以用特定的方法扩展

创建/读取/修改/验证数据

// 创建数据模型
var Book = Backbone.Model.extend({
    defaults: {
        name: "ename",
        author: 'eauthor',
        price: 0.01
    },
    // 数据验证
    validate: function (data) {
        if (data.price < 1) {
            return 'prices should not be less than $1'
         }
     }
 });

// 初始化数据
var javaBook = new Book({
    name: 'Thinking in Java',
    author: 'Bruce Eckel',
});

// 读取数据
console.log(javaBook.get('name'));
console.log(javaBook.get('author'));
console.log(javaBook.get('price'));

javaBook.on('change', function (model) {
    alert('change 事件被触发');
});

// 事件在触发时,总是会先触发属性事件,然后再触发change事件
javaBook.on('change:name', function (model, value) {
    alert('change:name 事件被触动');
});

javaBook.on('change:price', function (model, value) {
    //        var price = model.get('price');
    //  Get the previous value of an attribute, recorded at the time the last
    // `"change"` event was fired.
    var price = model.previous('price');
    console.log(model.previousAttributes())
    console.log('price: ' + price + ' value:' + value);
    if (price < value) {
        console.log('上涨了' + (value - price));
    } else if (price > value) {
        console.log('下降了' + (value - price));
    } else {
        console.log('价格没有发生变化');
    }
});

javaBook.on('invalid', function (model, error) {
    console.log("error" + error);
});

// 修改数据
// save 方法才进行validate
javaBook.set({
    name: 'Thinking in Java2',
    author: 'Bruce Eckel2',
    price: 0.03
});

console.log(javaBook.get('name'));
console.log(javaBook.get('author'));
console.log(javaBook.get('price'));

删除数据

    // 删除数据
    // 从内部属性散列表中删除指定属性(attribute)。 如果未设置 silent 选项,会触发 "change" 事件。
    javaBook.unset('name');
    console.log(javaBook.get('name'));// undefined

    // 从model中删除所有属性, 包括id属性。 如果未设置 silent 选项,会触发 "change" 事件。
    javaBook.clear();
    console.log(javaBook.get('name'));// undefined
    console.log(javaBook.get('author'));// undefined
    console.log(javaBook.get('price'));// undefined

同步服务器

解决NodeJS+Express模块的跨域访问控制问题:Access-Control-Allow-Origin

// 同步服务器
// 1
var Bok = Backbone.Model.extend({
    urlRoot: 'http://localhost:8001/service/'
});

var javaBok = new Bok({
    id: 1001,
    name: 'Thinking in Java',
    author: 'Bruce Eckel',
    price: 395.70
});

//    javaBok.save();
javaBok.destroy();

// 2
var Bok2 = Backbone.Model.extend({
    // urlRoot参数表示服务器接口地址的根目录,我们无法直接访问它,只能通过连接模型id来组成一个最终的接口地址
    urlRoot: '/service',
    // url参数表示服务器的接口地址是已知的,我们无需让Backbone自动连接模型id(这可能是在url本身已经设置了模型id,或者不需要传递模型id)
    url: '/javaservice'
});
var javaBok2 = new Bok2({
    id: 1001,
    name: 'Thinking in Java',
    author: 'Bruce Eckel',
    price: 395.70
});

javaBok2.save(null, {
    // 通过调用方法时传递的url参数优先级会高于模型定义时配置的url和urlRoot参数
    url: '/myservice'
});
上一篇 下一篇

猜你喜欢

热点阅读