コレクションを初期化するときのバックボーン

Question

私はレール3.1のmongodbとbackbonejsで小さな1ページアプリケーションを構築しています。

私は2つのリソースをjson apiから入手できます。 https://gist.github.com/1522134 ノートルータ - - https://gist.github.com/1522137

私はbackbonejs-でそれらを生成した私も、私は2つのseprateルータ

プロジェクトルーターを持っているこの

https://gist.github.com/1522131

のように見えるバックボーンにおける二つのモデルやコレクションを作成しましたgithubからの宝石のように、コードはちょうどテンプレートです。私は、ユーザーがノートの中を見たことがないだろうという大きなチャンスがあるので、私は、アプリケーションが起動されたときのメモをフェッチしたくないindex.hamlファイル内の私の基本的なルータ

#projects 

:javascript 
    $(function() { 
    window.router = new JsonApi.Routers.ProjectsRouter({projects: #{@projects.to_json.html_safe}}); 

    new JsonApi.Routers.NotesRouter(); 

    Backbone.history.start(); 
    }); 

を初期化します。だから開始時にそれを取得する理由はありません。 NotesRouter内部では@notes変数に依存しますが、.fetch（）メソッドを使用しないと、この変数は空です。また、私はノートがこの種の問題を解決するためbackbonejsのベストプラクティスは何ですか？5

PROJECT_ID = 1 note_id = 5

/

/1 /ノートのようなURLから閲覧再現することができなければなりませんか

Answer 1

ノートが要求されたときにノートを読み込みにしてみませんか？ここに例があります：

var State = Backbone.Model.extend({ 
    defaults: { 
     ready: false, 
     error: null 
    } 
}); 

var Note = Backbone.Model.extend({ 
    initialize: function() { 
     this.state = new State(); 
    } 
}); 

var Notes = Backbone.Collection.extend({ 
    model: Note, 

    initialize: function() { 
     this.state = new State(); 
    } 
}); 

var NoteCache = Backbone.Model.extend({ 

    initialize: function() { 
     this._loading = false; 
     this._loaded = false; 
     this._list = new Notes(); 
    }, 

    _createDeferred: function (id) { 
     var note = new Note({ id: id }); 
     this._list.add(note); 
     this._load(); 
     return note; 
    }, 

    getNote: function (id) { 
     return this._list.get(id) || this._createDeferred(id); 
    }, 

    getNotes: function() { 
     if (!this._loaded) 
      this._load(); 

     return this._list; 
    }, 

    _load: function() { 

     var that = this; 

     if (!this._loading) { 

      this._list.state.set({ ready: false, error: null }); 

      this._loading = true; 

      $.ajax({ 
       url: '/api/notes', 
       dataType: 'json', 
       cache: false, 
       type: 'GET', 
       success: function (response, textStatus, jqXHR) { 

        _.each(response.notes, function (note) { 

         var n = that._list.get(note.id); 
         if (n) { 
          n.set(note); 
         } else { 
          that._list.add(note, { silent: true }); 
          n = that._list.get(note.id); 
         } 
         n.state.set({ ready: true, error: null }); 
        }); 

        that._list.state.set({ ready: true, error: null }); 
        that._list.trigger('reset', that._list); 
        that._loaded = true; 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        that._list.state.set({ error: 'Error retrieving notes.' }); 
        that._list.each(function (note) { 
         note.state.set({ error: 'Error retrieving note.' }); 
        }); 
       }, 
       complete: function (jqXHR, textStatus) { 
        that._loading = false; 
       } 
      }); 
     } 
    } 
}); 

この例では、遅延ロードを管理するNoteCacheオブジェクトを定義しています。また、「状態」プロパティを「メモ」モデルと「メモ」コレクションに追加します。

あなたはおそらく（おそらくあなたのルート内の）どこかNoteCacheを初期化したいと思うし、あなたがノートやメモをいつでも、ちょうどこの操作を行います。

var note = noteCache.getNote(5); 
var notes = noteCache.getNotes(); 

は今、あなたのビュー内、あなたが聴きたいですよケースの状態変化のノート/ノートがまだロードされていないために：

var NoteView = Backbone.View.extend({ 
    initialize: function(){ 
    this.note.state.bind('change', this.render, this); 
    }, 
    render: function(){ 
    if (this.note.state.get('error') { 
     // todo: show error message 
     return this; 
    } 

    if (!this.note.state.get('ready') { 
     // todo: show loader animation 
     return this; 
    } 

    // todo: render view 
    return this; 
    } 
}); 

私はこれをテストしていないので、いくつかのバグがあるかもしれませんが、私はあなたのアイデアを得る願っています。