天天看點

(文檔翻譯)Ext.data.Model Associations 應用一個代理(Using a Proxy) Stores的使用(Usage in Stores)

原文連結: http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Model

一個模型(Model)就代表着你應用中管理的某個對象。比如說,一個人可能定義了一個模型來代表使用者(Users),産品(Product),汽車(Cars)或者任意其他現實世界中我們想用模型來表示的對象。模型通過modelmanager注冊,并被stores使用。而stores反過來又被Ext中許多綁定資料的元件所使用。

模型被定義為一系列字段(fields)以及任意和模型相關的方法和屬性的集合。比如: Ext.define('User',{    extend: 'Ext.data.Model',    config: {        fields:[           {name: 'name', type: 'string'},           {name: 'age',  type: 'int'},           {name: 'phone', type:'string'},           {name: 'alive', type:'boolean', defaultValue: true}       ]    },

   changeName: function() {        varoldName = this.get('name'),           newName = oldName + " TheBarbarian";

      this.set('name', newName);    } }); 這個字段數組自動的被 ModelManager轉化為一個MixedCollection,并且所有其他的函數和屬性被複制到新模型的原型中。

現在我們可以建立我們的User模型的執行個體并執行我們定義在其中的任意邏輯: var user = Ext.create('User',{    name : 'Conan',    age  : 24,    phone: '555-555-5555' });

user.changeName(); user.get('name'); //returns"Conan The Barbarian"

Validations 模型有對驗證的内嵌支援, 并且是通過Ext.data.validations (seeall validation functions)中的驗證器函數來執行的。驗證可以很容易的加到模型中: Ext.define('User',{     extend:'Ext.data.Model',

    config: {         fields: [             {name:'name',     type:'string'},             {name:'age',       type: 'int'},             {name:'phone',     type:'string'},             {name:'gender',   type: 'string'},             {name:'username', type: 'string'},             {name:'alive',     type: 'boolean',defaultValue: true}         ],

        validations: [             {type:'presence',   field: 'age'},             {type:'length',     field: 'name',    min: 2},             {type:'inclusion', field: 'gender',   list: ['Male','Female']},             {type:'exclusion', field: 'username', list: ['Admin', 'Operator']},             {type:'format',     field: 'username',matcher: /([a-z]+)[0-9]{2,3}/}         ]     } }); 驗證可以簡單地通過調用 validate函數來執行。該函數傳回一個 Ext.data.Errors對象: var instance =Ext.create('User', {    name: 'Ed',    gender: 'Male',    username: 'edspencer' });

var errors =instance.validate();

Associations

模型可以和其他的模型通過Ext.data.association.HasOne, belongsTo 以及hasMany的關系建立對應關系。例如,假設我們正在寫一個部落格的管理應用,要處理的項包括Users,Posts 以及 Comments。這些模型之間的關系我們可以這樣來表達: Ext.define('Post',{     extend: 'Ext.data.Model',

    config: {         fields: ['id','user_id'],         belongsTo: 'User',         hasMany   :{model: 'Comment', name: 'comments'}     } });

Ext.define('Comment', {     extend: 'Ext.data.Model',

    config: {         fields: ['id', 'user_id','post_id'],         belongsTo: 'Post'     } });

Ext.define('User', {     extend: 'Ext.data.Model',

    config: {         fields: ['id'],         hasMany: [             'Post',             {model: 'Comment', name: 'comments'}         ]     } }); 可以參看 Ext.data.association.HasOne ,  Ext.data.association.BelongsTo  and  Ext.data.association.HasMany的文檔來了解 關系的應用以及配置的更多細節。注意,關系也可以像下面這樣指定: Ext.define('User', {     extend:'Ext.data.Model',

    config: {         fields: ['id'],         associations: [             {type:'hasMany', model: 'Post',     name: 'posts'},             {type:'hasMany', model: 'Comment', name: 'comments'}         ]     } });

應用一個代理(Using a Proxy)

模型可以很好的代表資料和關系的類型,但是我們早晚要在某個地方想要去加載或者儲存那些資料。加載和儲存資料都是通過一個 Proxy,他可以在Model中直接配置: Ext.define('User', {     extend:'Ext.data.Model',

    config: {         fields: ['id', 'name', 'email'],         proxy: {             type:'rest',             url :'/users'         }     } }); 這裡我們已經設定了一個   RestProxy,它知道怎樣從後端加載資料以及如何儲存資料到後端。讓我們看看這是如何做到的: var user = Ext.create('User', {name: 'Ed Spencer', email:'[email protected]'}); user.save(); //POST /users 通過調用新的模型執行個體的save方法來告訴配置好了的 RestProxy我們希望把我們模型的資料存儲在伺服器上。   RestProxy指出這個模型之前沒有被儲存過因為它沒有id,并執行适當的操作--在這種情況下發送一個POST請求到我們配置好的url (/users) 。我們可以在任意的模型上配置任意的 Proxy并總是要遵從這個API--參見 Ext.data.proxy.Proxy來擷取完整的清單。 通過一個代理來加載資料也是很容易的: //get a reference to the User model class var User = Ext.ModelManager.getModel('User');

//Uses the configured RestProxy to make a GET request to/users/123 User.load(123, {     success: function(user){         console.log(user.getId()); //logs 123     } }); 模型也可以很容易的進行更新和銷毀: //the user Model we loaded in the last snippet: user.set('name', 'Edward Spencer');

//tells the Proxy to save the Model. In this case it willperform a PUT request to /users/123 as this Model already has anid user.save({     success: function(){         console.log('The User was updated');     } });

//tells the Proxy to destroy the Model. Performs a DELETErequest to /users/123 user.erase({     success: function(){         console.log('The User was destroyed!');     } });

Stores的使用(Usage in Stores)

我們想要下載下傳一系列的模型執行個體并在UI中展示和操作是很常見的。我們通過一個Store來建立: var store = Ext.create('Ext.data.Store', {     model: 'User' });

//uses the Proxy we set up on Model to load the Storedata store.load(); 一個Store僅僅是一個Model執行個體的集合--通常是從某個地方的伺服器下載下傳的。Store也可以通過一系列的增加,更新和移除Model執行個體來通過Proxy與伺服器保持同步。可以參看 Storedocs來了解關于Store的更多資訊。