Javascript MVC——Model

4799 ワード

javascript mvc 機能ダテジョブ Json

原文:http://javascriptmvc.com/docs.html#&who=jQuery.Model
通訳:劉貴学[email protected])

モデルは、アプリケーションをカプセル化するためのデータ層である.大きな応用においてモデルは非常に重要である:

パッケージサービスは、このように制御層とビューは、データがどこから来るかに関心がない.

オリジナルのトラフィックデータ操作と抽象的なより簡単な

のための補助関数を提供します.
二つの実現方法があります.

サービス要求またはインタラクティブにデータを取得する.

オリジナルのトラヒックデータをより有用な形に変換またはカプセル化する.

基本的な使い方
jQuery.Model類は、あなたのアプリケーションのデータ層を組織するための基本的な枠組みを提供します.まずAjaxの操作を見て、モデルの状況を考慮しないでください.もしアプリケーションがあれば、次のように要求します.

検索タスクリスト;

各タスクの残りの日数を表示します.

ユーザーがクリックすると、マークが完了します.
模型を使わないでどうやって実現するかを見ましょう.

$.Controller.extend("MyApp.Controllers.Tasks",{onDocument: true},
{
  //         ，       
  ready: function() {
    $.get('/tasks.json', this.callback('gotTasks'), 'json')
  },
 /*   json     ， ：
  * [{name: "trash", due_date: 1247111409283}, ...]
  */
 gotTasks: function( json ) { 
    for(var i =0; i < json.length; i++){
      var taskJson = json[i];
 
      //      
      var remaininTime = new Date() - new Date(taskJson.due_date);
 
      //   html
      $("#tasks").append(""+
                          ""+taskJson.name+""+
                          "Due Date = "+remaininTime+"")
    }
  },
//     ，    
//     ,   id, post    ，  
  ".task click" : function( el ) {
    $.post('/tasks/'+el.attr('data-taskid')+'.json',
         {complete: true}, 
      function(){
        el.remove();
      })
  }
})

このときコードもよさそうですが、この場合:

業務が変わる

適用する他の部分も残り時間を計算しますか?

他の部分もすべてのタスクを取得しますか?

同じタスクはページの違いに表示されますか?

解はもちろん強いモデル層が必要です.modelを書く前に、きれいなモデルのコントロール層がどうやって実現されるかを見てみましょう.

$.Controller.extend("MyApp.Controllers.Tasks",{onDocument: true},
{
  load: function() {
    Task.findAll({},this.callback('list'))
  },
  list: function( tasks ) {
    $("#tasks").html(this.view(tasks))
  },
  ".task click" : function( el ) {
    el.model().update({complete: true},function(){
      el.remove();
    });
  }
})

views/task/list.ejsファイルの内容は以下の通りです.

このようにするのはずっと良くなりましたか?もちろん、これらの改善は、ビューを使用しても、我々のコントローラを完全に読むことができます.モデルを見せてください.

$.Model.extend("Task",
{
 findAll: "/tasks.json",
 update: "/tasks/{id}.json"
},
{
 timeRemaining: function() {
  return new Date() - new Date(this.due_date)
 }
})

これは、Ajax機能を単独で実現し、リターン時にこれらのデータをカプセル化することができるからです.私たちに
コントローラとビューの各太字項目について話します.
Task.findAll
TaskのfindAll関数は「/tasky.json」からデータを要求し、データが戻ったらまず「wrapMany」関数を実行してから成功後のコールバック関数に伝えます.
もし、コールバック関数がどうやって仕事をするかわからないなら、wrapManyとcalbackを見てもいいです.
el.model
jQuery.fn.modelはjQueryの補助ツールで、これはhtml要素の中から1つのモデルの実例を返すことができます.list.ejsテンプレートはすべてのタスクをhtml要素に変えます.

> ...

残り時間はtimeRemaningです.
timeRemaningはモデル中の元のデータをカプセル化するための関数の一例です.
他の良いもの
以上はただモデル機能に関する小さな試みです.次のような特性を見せてください.
パッケージ
サービスとの対話を学ぶにはどうすればいいですか?

$.Model("Task",{
  findAll : "/tasks.json",    
  findOne : "/tasks/{id}.json", 
  create : "/tasks.json",
  update : "/tasks/{id}.json"
},{})

タイプ変換
「10-20-1982」のデータを自動的にnew Dateに変換します(1982,9,20)

$.Model("Task",{
  attributes : {birthday : "date"}
  convert : {
    date : function(raw){ ... }
  }
},{})

jQuery.Model.List
学習はどのようにして簡単に複数の例を処理しますか?

$.Model.List.extend("Task.List",{
  destroyAll : function(){
    var ids = this.map(function(c){ return c.id });
    $.post("/destroy",
      ids,
      this.callback('destroyed'),
      'json')
  },
  destroyed : function(){
    this.each(function(){ this.destroyed() });
  }
});
 
".destroyAll click" : function(){
  this.find('.destroy:checked')
      .closest('.task')
      .models()
      .destroyAll();
}

検証
モデルのプロパティを確認します.

$.Model.extend("Contact",{
init : function(){
    this.validate("birthday",function(){
        if(this.birthday > new Date){
            return "your birthday needs to be in the past"
        }
    })
}
,{});

aリンク制御新しいウィンドウを開くとアドレスバーがありません.