Backbone入門之模型(Backbone.Model)

歡迎訪問我的個人博客

Backbone模型包含應(yīng)用程序的數(shù)據(jù)和與數(shù)據(jù)相關(guān)的邏輯處理,我們通過拓展Backbone.Model對象來創(chuàng)建模型:

    var app = app || {};
    app.MenuModel = Backbone.Model.extend({});

構(gòu)造函數(shù)初始化

當(dāng)創(chuàng)建一個模型的新實例時吗冤,其構(gòu)造函數(shù)牌捷,即initialize()方法會被調(diào)用:


    app.MenuModel = Backbone.Model.extend({
        initialize: function() {
            console.log('Initialize the Model.');
        }
    });
    app. menu = new app.MenuModel();

默認值

創(chuàng)建Backbone模型時,Backbone允許我們?yōu)槟P驮O(shè)置一組默認值拓轻,通過defaults屬性即可設(shè)置;當(dāng)實例化模型時,可傳入一個參數(shù)對象仪壮,此對象即為模型的數(shù)據(jù),傳入?yún)?shù)值將覆蓋所設(shè)置的默認值胳徽。


    app.MenuModel = Backbone.Model.extend({
        defaults: {
            title: 'this is a menu',
            name: '最近會話',
            status: 'active'
        }
    });
    app.menu = new app.MenuModel({
        status: 'inactive'
    });
    console.log(JSON.parse(app.menu));
    //{"title": "this is a menu", "name": "最近會話", "status": "inactive"}

屬性操作

  • Model.get()

    Model.get()方法用于訪問模型的屬性:

    
        app.MenuModel = Backbone.Model.extend({
            defaults: {
                title: 'this is a menu',
                name: '最近會話',
                status: 'active'
            }
        });
        app.menu = new app.MenuModel({
            status: 'inactive'
        });
        console.log(app.menu.get('status'));//inactive
    
  • Model.set()

    Model.set()方法用于設(shè)置模型的一個或多個屬性值:

    
        app.MenuModel = Backbone.Model.extend({
            defaults: {
                title: 'this is a menu',
                name: '最近會話',
                status: 'active'
            }
        });
        app.menu = new app.MenuModel({
            status: 'inactive'
        });
        console.log(app.menu.get('status'));//inactive
        app.menu.set({
            status: 'active',
            title: 'menu'
        });
        console.log(app.menu.get('status'));//active
    
  • Model.attributes

    Backbone模型的attributes屬性积锅,是包含模型狀態(tài)的一個內(nèi)部散列表爽彤,使用Model.attributes可直接訪問該模型所有數(shù)據(jù),其通常以服務(wù)器返回的JSON對象數(shù)據(jù)形式存在:

        
        app.MenuModel = Backbone.Model.extend({
            defaults: {
                title: 'this is a menu',
                name: '最近會話',
                status: 'active'
            }
        });
        app.menu = new app.MenuModel({
            status: 'inactive'
        });
        console.log(app.menu.attributes);
        //Object {status: "inactive", title: "this is a menu", name: "最近會話"} 
    

注:強烈建議使用set方法更新模型attributes對象而不是直接修改attributes對象缚陷。

  • Model.toJSON()

    Model.toJSON()方法返回模型attributes對象拷貝副本的JSON格式對象:

    
        app.MenuModel = Backbone.Model.extend({
            defaults: {
                title: 'this is a menu',
                name: '最近會話',
                status: 'active'
            }
        });
        app.menu = new app.MenuModel({
            status: 'inactive'
        });
        console.log(app.menu.toJSON());
        //Object {status: "inactive", title: "this is a menu", name: "最近會話"}
        console.log(JSON.stringify(app.menu));
        //{"status":"inactive","title":"this is a menu","name":"最近會話"} 
    

注:當(dāng)給JSON.stringify()傳遞帶toJSON()方法的對象時适篙,其處理的是該對象執(zhí)行toJSON()方法后返回的值,而不是原始傳入的對象箫爷,如:


    var a = {
        data: {
            name: '驚鴻',
            title: 'sj'
        },
        toJSON: function() {
            return 'sds';
        }
    };
    console.log(JSON.stringify(a));//"sds"

模型id與cid

id

id是模型的特殊屬性嚷节,可以是任意字符串(整型 id 或 UUID)。在屬性中設(shè)置的 id 會被直接拷貝到model屬性上虎锚。 也可以在集合(collections)中通過 id 獲取特定model硫痰。

  • idAttribute

    模型的唯一標識符,被儲存在 id 屬性下翁都,可以通過設(shè)置Model的idAttribute與一個唯一值key對應(yīng)碍论,從而形成一個從該key到模型id的一個映射。

    
        app.MenuModel = Backbone.Model.extend({
            defaults: {
                title: 'this is a menu',
                name: '最近會話',
                status: 'active'
            },
            idAttribute: 'idx',     //形成從idx到id的映射     
            initialize: function() {                
            }  
        });
        app.menu = new app.MenuModel({
            idx: '001'
        });      
        console.log(app.menu.id);//001     
    

cid

cid柄慰,即客戶端id鳍悠,是model創(chuàng)建時自動產(chǎn)生的唯一標識符。 客戶端id在model尚未保存到服務(wù)器之前便存在坐搔,此時model可能仍不具有最終的id藏研,但已經(jīng)需要在用戶界面可見。

    
    console.log(app.menu.cid);//c1或其他

模型變化監(jiān)聽

通過監(jiān)聽模型上change事件概行,可以監(jiān)測到模型的變化蠢挡,既可以監(jiān)聽整個模型的改變,也可以監(jiān)聽模型單個屬性的變化凳忙;通常在模型initialize()函數(shù)中添加監(jiān)聽器:


    app.MenuModel = Backbone.Model.extend({
        defaults: {
            title: 'this is a menu',
            name: '最近會話',
            status: 'active'
        },
        initialize: function() {
            //監(jiān)聽模型變化
            this.on('change', function(model) {
                console.log(model);
                console.log('模型已改變');
            });
            //監(jiān)聽模型單個屬性變化
            this.on('change:name', function(model) {
                console.log('菜單名已修改');
            });
        }
    
    });
    app.menu = new app.MenuModel();
    app.menu.set({
        title: 'menu',
        status: 'inactive'
    });
    console.log(app.menu.get('title'));//menu
    console.log(app.menu.get('status'));//inactive
    app.menu.set({
        name: '常用聯(lián)系人',
    });
    console.log(app.menu.get('name'));//常用聯(lián)系人

驗證

調(diào)用Model.validate()方法進行模型驗證业踏,在設(shè)置屬性值之前對其進行驗證,默認涧卵,在使用save()方法或調(diào)用set()方法時設(shè)置了{validate: true}參數(shù)以持久化數(shù)據(jù)模型均會觸發(fā)驗證勤家;驗證通過將不返回值,驗證失敗將觸發(fā)"invalid"事件柳恐, 此方法返回一個錯誤值伐脖,并用此方法返回的值設(shè)置模型上的validationError屬性,同時模型上的屬性值不會持久化到服務(wù)器:


    app.MenuModel = Backbone.Model.extend({
        defaults: {
            title: 'this is a menu',
            //name: '最近會話',
            status: 'active'
        },
        validate: function(attr) {
            if (attr.name == undefined ) {
                //返回錯誤值
                return '菜單名不能為空';
            }
        },
        initialize: function() {
            //監(jiān)聽invalid事件
            this.on('invalid', function(model, err) {
                console.log('title: ' + model.get('title'), '; error: ' + err);
            });
        }
    }); 
    app.menu = new app.MenuModel();
    console.log((app.menu).toJSON());
    //Object {title: "this is a menu", status: "active"} 
    
    //set()方法且設(shè)置{validate: true}參數(shù)
    app.menu.set({
        title: 'menu',
    }, {validate: true});
    console.log(app.menu.get('title'));//this is a menu
    
     //set()方法但不設(shè)置{validate: true}參數(shù)
    app.menu.set({
        title: 'menu',
    });
    console.log(app.menu.get('title'));//menu

注:validate函數(shù)接收的參數(shù)對象是在執(zhí)行set()或save()方法后模型的值對象乐设。

本篇對Backbone模型(Backbone.Model)對象進行了簡單闡述總結(jié)讼庇,在下一篇將對Backbone集合(Backbone.Collection)進行講述

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末近尚,一起剝皮案震驚了整個濱河市蠕啄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌戈锻,老刑警劉巖歼跟,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件却嗡,死亡現(xiàn)場離奇詭異,居然都是意外死亡嘹承,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門如庭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叹卷,“玉大人,你說我怎么就攤上這事坪它≈柚瘢” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵往毡,是天一觀的道長蒙揣。 經(jīng)常有香客問我,道長开瞭,這世上最難降的妖魔是什么懒震? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮嗤详,結(jié)果婚禮上个扰,老公的妹妹穿的比我還像新娘。我一直安慰自己葱色,他們只是感情好递宅,可當(dāng)我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著苍狰,像睡著了一般办龄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上淋昭,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天俐填,我揣著相機與錄音,去河邊找鬼响牛。 笑死玷禽,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的呀打。 我是一名探鬼主播矢赁,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼贬丛!你這毒婦竟也來了撩银?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤豺憔,失蹤者是張志新(化名)和其女友劉穎额获,沒想到半個月后够庙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡抄邀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年耘眨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片境肾。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡剔难,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出奥喻,到底是詐尸還是另有隱情偶宫,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布环鲤,位于F島的核電站纯趋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏冷离。R本人自食惡果不足惜吵冒,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望西剥。 院中可真熱鬧桦锄,春花似錦、人聲如沸蔫耽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽匙铡。三九已至图甜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鳖眼,已是汗流浹背黑毅。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钦讳,地道東北人矿瘦。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像愿卒,于是被迫代替她去往敵國和親缚去。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 我的個人博客 上一篇琼开,我們講述了Backbone模型的入門學(xué)習(xí)易结,本篇開始學(xué)習(xí)Backbone集合。 Backbon...
    驚鴻三世閱讀 2,307評論 1 9
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)搞动,斷路器躏精,智...
    卡卡羅2017閱讀 134,704評論 18 139
  • 寫在前面 backbone是我兩年多前入門前端的時候接觸到的第一個框架,當(dāng)初被backbone的強大功能所吸引(當(dāng)...
    浙大javascript聯(lián)盟閱讀 1,144評論 0 5
  • 當(dāng)黑白映射入我的雙瞳鹦肿,腦海浮現(xiàn)的是極致對比的鮮明矗烛。深入,深入箩溃,黑白便不僅是一種色彩高诺,更是一種狀態(tài)。 ...
    沙漏sl閱讀 156評論 0 0
  • 剛看了一篇別人關(guān)于感情的的文章碾篡,立刻就在評論里輸入:你的感情觀全部都是得失》げ停可當(dāng)文字全部輸入完畢的時开泽,發(fā)送剪頭始終...
    JAN點閱讀 239評論 0 0