Backbone.jsフレームワークのModelとCollectionの使用例_基礎知識-jsチュートリアル-php.cn

モデル
バックボーンに関して、最も基本的なものはモデルです。これはバックエンド開発におけるデータベースマッピングモデルのようなもので、データオブジェクトのモデルでもあり、バックボーンと同じ属性を持つ必要があります。エンドモデル (フロントエンドを通じて操作する必要があるプロパティのみ)。
バックボーンモデルとは何かを理解するために、例を段階的に説明します。
まず HTML ページを定義します:

<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
/**
 *此处填充代码
 **/
})(jQuery);
</script>
</html>

ログイン後にコピー

この HTML の script タグ内の関数に次のコードを入力する必要があります。

1. 最も単純なオブジェクト

Man = Backbone.Model.extend({
    initialize: function(){
      alert('Hey, you create me!');
    }
  });
var man = new Man;

ログイン後にコピー

これは非常に単純です。helloworld にもモデル表示があり、初期化中のメソッド (コンストラクターと呼ばれます) は定義されていません。

2. オブジェクトの割り当ての 2 つの方法
最初の方法は、直接定義してデフォルト値を設定することです。

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  }
});

var man = new Man;
alert(man.get('name'));

ログイン後にコピー

2 番目のタイプは、
を割り当てるときに定義されます。

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  }
});
man.set({name:'the5fire',age:'10'});
alert(man.get('name'));

ログイン後にコピー

Getは値を取得する際に使用します。

3. オブジェクト内のメソッド

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
alert(man.aboutMe());

ログイン後にコピー

4. オブジェクトの属性の変更を監視する

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:'the5fire'}) //触发绑定的change事件，alert。

ログイン後にコピー

5. オブジェクトの検証ルールとエラープロンプトを追加します

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:''}); //根据验证规则，弹出错误提示。

ログイン後にコピー

6. オブジェクトの取得と保存には、サーバー側のサポートが必要です。
まず、オブジェクトの url 属性を定義する必要があります。save メソッドが呼び出されると、オブジェクトのすべての属性がサーバーに送信されます。

Man = Backbone.Model.extend({
  url:'/save/',
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;;
man.set({name:'the5fire'});
man.save(); //会发送POST到模型对应的url，数据格式为json{"name":"the5fire","age":38}
//然后接着就是从服务器端获取数据使用方法fetch([options])
var man1 = new Man;
//第一种情况，如果直接使用fetch方法，那么他会发送get请求到你model的url中，
  //你在服务器端可以通过判断是get还是post来进行对应的操作。
man1.fetch();
//第二种情况，在fetch中加入参数，如下：
man1.fetch({url:'/getmans/'});
  //这样，就会发送get请求到/getmans/这个url中，
  //服务器返回的结果样式应该是对应的json格式数据，同save时POST过去的格式。

//不过接受服务器端返回的数据方法是这样的：
man1.fetch({url:'/getmans/',success:function(model,response){
    alert('success');
    //model为获取到的数据
    alert(model.get('name'));
  },error:function(){
    //当返回格式不正确或者是非json数据时，会执行此方法
    alert('error');
  }});

ログイン後にコピー

注: 上記のコードは正常に実行できるコードのみですが、後ほどサーバー側の例を示します。
ここでもう 1 つ追加すべき点は、サーバー上のすべての非同期操作は Backbone.sync メソッドを通じて完了し、このメソッドが呼び出されるときにパラメーターが自動的に渡され、そのパラメーターに基づいて対応するリクエストがサーバーに送信されることです。。たとえば、保存すると、Backbone はオブジェクトが新規であるかどうかを判断し、変更されただけの既存のオブジェクトである場合はパラメータを更新します。メソッドの場合、パラメータが読み取られ、destroy の場合、パラメータは削除されます。これは CRUD (「作成」、「読み取り」、「更新」、または「削除」) とも呼ばれ、これら 4 つのパラメーターに対応するリクエストタイプは POST、GET、PUT、および DELETE です。このリクエストタイプに基づいて、サーバー上で対応する CRUD 操作を実行できます。

注:
URL と urlRoot に関しては、URL を設定すると、CRUD は対応するリクエストをこの URL に送信しますが、もう 1 つの問題は、リクエストが送信されてもデータが送信されない場合、サーバーは削除リクエストを送信しないことです。どのオブジェクト (レコード) を削除する必要があるかがわかるため、urlRoot の別の概念を示します。urlRoot を設定した後、PUT リクエストと DELETE リクエストを送信するときに、リクエストされる URL アドレスは /baseurl/[model.id ] になります。 URL の後ろにある値を抽出することで、サーバー側の対応するオブジェクト (レコード) を更新または削除します。

コレクション
コレクションは、モデルオブジェクトの順序付けされたコレクションです。いくつかの例を参照すると、その概念が非常に簡単に理解できるでしょう。
1. 本と本棚の例

Book = Backbone.Model.extend({

defaults : {  // 感谢网友蓝色动力指正改为defaults

title:'default'

},

initialize: function(){

//alert('Hey, you create me!');

}

});

BookShelf = Backbone.Collection.extend({

model : Book

});

var book1 = new Book({title : 'book1'});

var book2 = new Book({title : 'book2'});

var book3 = new Book({title : 'book3'});

//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add

var bookShelf = new BookShelf;

bookShelf.add(book1);

bookShelf.add(book2);

bookShelf.add(book3);

bookShelf.remove(book3);



//基于underscore这个js库，还可以使用each的方法获取collection中的数据

bookShelf.each(function(book){

alert(book.get('title'));

});

ログイン後にコピー

非常に簡単で、説明は不要です
2. フェッチを使用してサーバーからデータを取得します
まず、上の Bookshelf に URL を定義します。コレクションには urlRoot 属性がないことに注意してください。または、次のように、fetch メソッドで url の値を直接定義します:

bookShelf.fetch({url:'/getbooks/',success:function(collection,response){

collection.each(function(book){

alert(book.get('title'));

});

},error:function(){

alert('error');

}});

ログイン後にコピー

正しい形式のデータが返された場合は、success メソッドが呼び出され、戻り値を受け取る 2 つのメソッドも定義されていると思います。もちろん、error メソッドも呼び出されます。success メソッドと同じ仮パラメータを追加します。
BookShelf の対応する戻り形式は次のとおりです: [{'title':'book1'},{'title':'book2'}....]
3.リセット方法
このメソッドは、上記のフェッチと連携する必要があります。コレクションがデータをフェッチした後、リセットメソッドを呼び出すため、コレクション内でリセットメソッドを定義するか、リセットメソッドをバインドする必要があります。バインディングを使用したデモは次のとおりです:

bookShelf.bind('reset',showAllBooks);

showAllBooks = function(){

bookShelf.each(function(book){

  &#8203;//将book数据渲染到页面。

});

}

ログイン後にコピー

バインディングステップはフェッチの前に実行する必要があります。
コレクションの完全なコードを以下に示します。これにはサーバー側のサポートが必要です。サーバー側の構築については後で説明します。

<!DOCTYPE html>
<html>
<head>
  <title>the5fire-backbone-collection</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
  //collection是一个简单的models的有序集合
  //1、一个简单的例子

  Book = Backbone.Model.extend({
    defaults : {  // 感谢网友蓝色动力指正改为defaults
      title:'default'
    },
    initialize: function(){
      //alert('Hey, you create me!');
    }
  });
  BookShelf = Backbone.Collection.extend({
    model : Book
  });

  var book1 = new Book({title : 'book1'});
  var book2 = new Book({title : 'book2'});
  var book3 = new Book({title : 'book3'});

  //var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add
  var bookShelf = new BookShelf;
  bookShelf.add(book1);
  bookShelf.add(book2);
  bookShelf.add(book3);
  bookShelf.remove(book3);
  /*
  for(var i=0; i<bookShelf.models.length; i++) {
    alert(bookShelf.models[i].get('title'));
  }
  */
  //基于underscore这个js库，还可以使用each的方法获取collection中的数据
  bookShelf.each(function(book){
    alert(book.get('title'));
  });

  //2、使用fetch从服务器端获取数据,使用reset渲染
  bookShelf.bind('reset', showAllBooks);
  bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
    collection.each(function(book){
      alert(book.get('title'));
    });
  },error:function(){
    alert('error');
  }});
  showAllBooks = function(){
    bookShelf.each(function(book){
      &#8203;//将book数据渲染到页面。
    });
  }
  //上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);
</script>
</html>

ログイン後にコピー