BackBone.js入門チュートリアル

10011 ワード

くだらないことは言わないで,本題に直行する.
Backbone.jsって何?
Backbone.jsは、Modelsによってkey-valueバインドおよびカスタムイベント処理を行い、Collectionsによって列挙機能のための豊富なAPIを提供し、Viewsによってイベント処理を行い、既存のApplicationはjQueryとunderscoreに基づくフロントエンドjsフレームワークであるRESTful JSONインタフェースによってインタラクションを行う.
Backboneの重要な概念

Model:現実データに基づいて構築された抽象、例えばpeople

Collection:例えば

人

View:ModelとCollectionのデータを表示し、ページ上の

にデータをレンダリングします.

Router:ページのルーティングを制御する

Backboneでは、データをModelとして使用したり、Modelでデータを作成したり、データ検証を行ったり、破棄したり、サーバに保存したりすることができます.インタフェース上の操作がmodelのプロパティの変化を引き起こすと、modelはchangeのイベントをトリガーします.modelステータスを表示するviewsは、modelがchangeをトリガーするメッセージを受信し、対応する応答を発行し、新しいデータをインタフェースに再レンダリングします.完全なBackboneアプリケーションでは、モデルが変化するとviewsが簡単に自己更新できるため、DOMから特別なidでノードを取得したり、HTMLページを手動で更新したりする必要はありません.
感じて
まず前の例で感じてみましょう.簡易勤務カードシステムです.次のコードは次のとおりです.

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button id="check">       </button>
  <ul id="person-list"></ul>
</body>
<script> (function($){ //   Model     var People=Backbone.Model.extend({ name:null,//   ctime:null//     }); //   Collection     var Peoples=Backbone.Collection.extend({ initialize:function(models,options){ this.bind("add",options.view.addOnePerson);//add Model   Collection，     View    addOnePerson   } }); //   View     AppView=Backbone.View.extend({ el:$("body"), initialize:function(){ this.peoples=new Peoples(null,{view:this})//     Collection }, events:{ "click #check":"checkIn",//  #check click  ，   checkIn   }, checkIn:function(){ var person_name=prompt("     ？"); if(person_name==""){ person_name="   "; } var ctime=new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds(); var person=new People({name:person_name,ctime:ctime}); this.peoples.add(person); }, addOnePerson:function(model){ $("#person-list").append("<li>"+model.get('name')+"  ，       ："+model.get('ctime')+"</li>"); } }); var appview=new AppView;//     View，    initialize     })(jQuery) </script>

</html>

実践に着手する.
このセクションでは、Model、Collection、View、Routerの4つのセクションから説明します.
Model
Modelのこのセクションでは、公式サイトでは、「Modelはjsアプリケーションのコアであり、基礎的なデータと、これらのデータをめぐる論理:データ変換、検証、属性計算、アクセス制御を含む」と説明しています.この言葉は基本的にModelの一つのプロジェクトにおける役割を高度に要約している.実際、jsアプリケーションだけでなく、データ収集と処理のプロジェクトでもModelは重要なコンテンツです.
Web側では、Modelのもう一つの重要な機能は、サーバ側のプログラムがデータベースとインタラクションする必要があるように、サーバ側とデータインタラクションを行うことです.そのためModelは,データを携帯して各モジュール間を逃げ回るものであるべきである.
だから、Ajax操作は、Modelレイヤに書くべきです.

(function() {
  var Man = Backbone.Model.extend({
    defaults: {
      name: "  ",
      age: "38"
    },
    initialize: function() {
      //        ，change     validate  
      this.bind("change:name", function() {
        var name = this.get("name");
        alert("    name    ：" + name);
      });
      this.bind("invalid", function(model, error) {
        alert(error);
      });
    },
    validate: function(attributes) {
      if (attributes.name === '') {
        return "name    ！";
      }
    },
    aboutMe: function() {
      return "  " + this.get("name") + ",  " + this.get("age") + " ";
    }
  });
  var man = new Man();
  alert(man.aboutMe());
  man.set({
    name: ''
  });
  man.save();//  
})();

modelとサーバ側のインタラクションでは、saveメソッドを呼び出すとpostオブジェクトのすべての属性がserver側に、fetchを呼び出すとgetリクエストがserver側に送信され、受信データと送信データのフォーマットはjson形式になります.
次回はCollectionを更新します.

Spring AOP基本概念

Jquery UI autoComplete設定max