モデルとは何ですか
Backboneの著者は、次のようにモデルを定義しています。
モデルは任意のWebアプリケーションのコアであり、インタラクティブデータとほとんどのロジックが含まれています。例:変換、検証、属性、アクセス許可など。
それでは、最初にモデルを作成しましょう。
person = backbone.model.extend({initialize:function(){alert( "welcome to backbone!");}}); var person = new person;上記のコードでは、Personというモデルを定義し、インスタンス化後、人を取得します。モデルをインスタンス化するときはいつでも、intialize()メソッドが自動的にトリガーされます(この原則は収集、ビューにも適用されます)。もちろん、モデルを定義するときに初期化()メソッドは必須ではありませんが、バックボーンを使用すると不可欠です。
モデルプロパティを設定します
次に、モデルインスタンスを作成してモデルのプロパティを設定するときに、いくつかのパラメーターを渡す必要があります。
person = backbone.model.extend({initialize:function(){alert( "welcome to backbone!");}}); // set var person = new person({name: "stephenlee"、age:22}); var person = new Person(); person.set({name: "Stephenlee"、age:22});モデルプロパティを取得します
Modelのget()メソッドを使用して、プロパティを取得できます。
person = backbone.model.extend({initialize:function(){alert( "welcome to backbone!");}}); var person = new person({name: "stephenlee"、age:22}); var age = person.get( "age"); // 22var name = person.get( "name"); //「Stephenlee」モデルのデフォルトプロパティを設定します
モデルのデフォルトプロパティをインスタンス化するときに、モデルにいくつかのデフォルトプロパティ値を含めることを望む場合があります。これは、モデルのデフォルトプロパティを定義することで達成できます。
person = backbone.model.extend({defaults:{name: "lebronjames"、age:30、}、initial:function:function(){alert( "welcome to backbone!");}}); var person({name: "stephenlee"}); //インスタンス化中に年齢値が指定されていないため、デフォルト値は30VAR name = person.get( "name"); //インスタンスが名前の値を設定した場合、それは「スティーブンリー」ですモデルプロパティを使用します
モデル内のメソッドをカスタマイズして、モデル内のプロパティを使用できます。 (すべてのカスタムメソッドがデフォルトでパブリック)
person = backbone.model.extend({defaults:{name: "lebronjames"、 "lebronjames"、age:30、趣味: "basketball"}、intialize:function(){alert( "backbone!");}、vike:function(hobbyname){this.set(byname:hobbyname}); 「スティーブンリー」、年齢:22}); person.like( "Coding"); // Stephenleeの趣味をCodingVar Hobby = person.get( "hobby"); //「コーディング」モデルプロパティの変更を聞いてください
バックボーンメカニズムによると、モデルの属性を聞くことができます。次に、Initialize()メソッドのモデルの属性をバインドして、属性名を例として取得しようとします。
person = backbone.model.extend({defaults:{name: "lebronjames"、age:30、}、initialize:function(){alert( "backbone to backbone!"); this.on( "change:name"、function {model name){var name = model.get( "name"); // }}); var person = new Person(); var age = person.set({name: "kobebryant"});上記のコードを通して、モデルの特定のプロパティを聞く方法を知っています。モデルのすべてのプロパティを聞く必要があると仮定すると、 'this.on( "change"、function(model){})を使用します。 。
サーバーとモデル間のデータ相互作用
前述のように、モデルにはインタラクティブデータが含まれているため、その機能の1つは、サーバーから送信されたデータを携帯してサーバーと対話することです。ここで、サーバーにMySQLのテーブルユーザーがいると仮定します。これには、3つのフィールドID、名前、電子メールがあります。サーバー側は、レストスタイルを使用してフロントエンドと通信し、URL: /ユーザーを使用して対話します。私たちのモデルは次のように定義されています:
var usermodel = backbone.model.extend({urlroot: '/user'、defaults:{name: ''、email: ''}});モデルを作成します
Backboneの各モデルにはプロパティIDがあり、これはサーバー側のデータに1つずつ対応します。サーバー側のMySQLテーブルユーザーに新しいレコードを追加する場合は、モデルをインスタンス化してSave()メソッドを呼び出すだけです。この時点で、モデルインスタンスの属性IDは空です。つまり、モデルが新しく作成されているため、バックボーンは指定されたURLにPOSTリクエストを送信します。
var usermodel = backbone.model.extend({urlroot: '/user'、defaults:{name: ''、email: ''}}); var user = new usermodel(); // ID属性を定義していないことに注意してくださいvar userdetails = {name '' sephenlee '' frid.lee nemene '' frid.lee '' frid.lee '' frid.lee '' frid.lee '' ID属性はありません。現時点では、Save()メソッドを使用してください。 Backboneは、サーバー側にPOSTリクエストを送信します。データを受信した後、サーバー側はそれを保存し、IDを含む情報をModelUser.save(userdetails、{success:function(user){alert(user.tojson());}})に返します。現時点では、Stephenleeと電子メール[email protected]という名前のサーバー上のMySQLのユーザーテーブルに追加のレコードがあります。
モデルを取得します
モデルを作成し、サーバー側のデータベースに保存しました。モデルを作成する場合、サーバー側によって返されるID属性値は1です。現時点では、IDの値を介して保存されたデータを取得できます。 ID属性値を使用してモデルインスタンスを初期化すると、fetch()操作を介して、バックボーンは指定されたURLにGETリクエストを送信します。
var user = new usermodel({id:1}); //初期化中にIDの値を指定する// fetch()メソッドを使用してユーザー/1からデータを要求すると、サーバー側は名前、電子メール、その他の情報ユーザーを含む完全なユーザーレコードを返します。モデルを更新します
保存されたユーザーレコードを変更する必要がある場合は、既知のID値を使用してSave()メソッドを使用しますが、現時点ではIDが空でないため、バックボーンは指定されたURLにプットリクエストを送信します。
var user = new usermodel({id:1、name: 'stephenlee'、email: '[email protected]'}); // id値を指定するときにID値を指定します。 Backboneはユーザー/1にプットリクエストを送信し、データベースuser.save({email: '[email protected]'}、{success:function(model){alert(user.tojson());}});モデルを削除します
データベース内のレコードを削除する必要がある場合は、既知のID値を使用し、Destroy()メソッドを使用します。この時点で、バックボーンは指定されたURLに削除操作を送信します。
var user = new usermodel({id:1、name: 'stephenlee'、email: '[email protected]'}); // IDの値を指定するときにID値を指定します。リクエストを受信した後、ID 1のデータはデータベースuser.destroy({success:function(){alert( 'Destroled');}})で削除されます。コレクションとは
要するに、Backboneのコレクションは、モデルの注文されたコレクションです。たとえば、次の状況で使用できます。
モデル:学生、コレクション:ClassStudentsModel:TODOアイテム、コレクション:TODOリストモデル:動物、コレクション:動物園
コレクションは通常、同じタイプのモデルのみを使用しますが、モデルは次のようなさまざまなタイプのコレクションに属することができます。
モデル:学生、コレクション:ジムクラスモデル:学生、コレクション:アートクラスモデル:学生、コレクション:英語クラス
コレクションを作成します
//モデルsongvar song = backbone.model.extend({defaults:{not quatified "、" lecistified "、" quatified "}、initial:function(){console.log(" music is the nessor ");}}); // define collection collection albumbar album = backbone.celection.extend(model sing in faris in farise in farise in farin New Song({name: "How Bizarre"、Artist: "omc"}); var song1 = new song({name: "how bizarre"、artist: "omc"}); var song2 = new song({name: "sexual Healing"、 "artist:" marvin gaye "}) = new Album([song1、song2、song3]); console.log(myalbum.models); //出力は[song1、song2、song3]です