美文网首页
Backbone 教程(三):Model模型

Backbone 教程(三):Model模型

作者: bigggge | 来源:发表于2016-11-11 11:00 被阅读18次

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

相关文章

  • Backbone 教程(三):Model模型

    Models(模型)是任何Javascript应用的核心,包括数据交互及与其相关的大量逻辑: 转换、验证、计算属性...

  • MVC简述

    创建模型 let M = Backbone.Model.extend({}) 创建集合 创建视图 Backbone...

  • Backbone入门之模型(Backbone.Model)

    欢迎访问我的个人博客 Backbone模型包含应用程序的数据和与数据相关的逻辑处理,我们通过拓展Backbone....

  • backbone笔记

    Backbone核心模块:model/view/Collection/router model 负责数据&逻辑 v...

  • (翻译)TensorFlow 线性模型教程

    TensorFlow Linear Model Tutorial# TensorFlow 线性模型教程 In th...

  • backbone基础

    01-01 model var Note = Backbone.Model.extend({}) 01-02 01...

  • 初探Backbone.js

    一、什么是Backbone.js "Backbone.js通过模型,集合和视图构建web应用。模型是键-值绑定和自...

  • Backbone.js浅析(Backbone.Model

    Model代表单个的对象实体。 上面代码使用extend方法,生成了一个User类,它代表model的模板。然后,...

  • DOM简介

    DOM是什么? w3shcool dom教程DOM 是 Document Object Model(文档对象模型)...

  • Tensorflow模型的保存与恢复

    在这篇tensorflow教程中,我会解释: 1) Tensorflow的模型(model)长什么样子? 2) 如...

网友评论

      本文标题:Backbone 教程(三):Model模型

      本文链接:https://www.haomeiwen.com/subject/qkcfpttx.html