4

私はバックボーンライブラリで比較的新しいです。バックボーン+requirejs+jquery-mobileに基づいてモバイルアプリケーションを構築しようとしています。コレクションを既存のjsonローカルファイルで埋めることができます。（将来的にはリモートサーバーから来る可能性があります）。現在、このコレクションを1回だけ呼び出してから、読み取り用にlocalStorageに保存しようとしています。このために私はこのアダプター（https://github.com/jeromegn/Backbone.localStorage）を使おうとしていますが、その方法がわかりません。

サンプルコード

// models
define([
  'underscore',
  'backbone'
], function(_, Backbone) {
  var AzModel = Backbone.Model.extend({
    defaults: {
      item: '',
      img:"img/gi.jpg"
    },
    initialize: function(){
    }
  });
  return AzModel;
});

// Collection
define(['jquery', 'underscore', 'backbone', 'models/az'], function($, _, Backbone, AzModel) {
    var AzCollection = Backbone.Collection.extend({
     localStorage: new Backbone.LocalStorage("AzStore"), // Unique name within your app.       
    url : "json/azlist.json",
    model : AzModel
    parse : function(response) {
         return response;
    }
});

return AzCollection;
});

define(['jquery', 'underscore', 'backbone', 'collections/azlist', 'text!templates/karate/az.html'], function($, _, Backbone, AzList, AzViewTemplate) {
    var AzView = Backbone.View.extend({
        id:"az",
        initialize: function() {
            this.collection = new AzList(); 
            var self = this;
            this.collection.fetch().done(function() {
                //alert("done")
                self.render();
            }); 

        },
        render : function() {
            var data = this.collection;
            if (data.length == 0) {
                // Show's the jQuery Mobile loading icon
                $.mobile.loading("show");
            } else {
                 $.mobile.loading("hide");
                console.log(data.toJSON());
                  this.$el.html(_.template(AzViewTemplate, {data:data.toJSON()}));
                  // create jqueryui
                 $(document).trigger("create");
            }
            return this;
        }
    });
    return AzView;
});

誰かが私に道を教えてくれますか？

4

1 に答える 1

5

バックボーンローカルストレージアダプターは、コレクション、またはコレクション内のモデルを作成Collection.syncするときに使用される関数をオーバーライドします。プロパティを設定すると、サーバーではなくローカルストレージに呼び出しがリダイレクトされます。つまり、または（ローカルストレージまたはサーバーの読み取りと書き込み）のいずれかを実行できますが、両方を同時に実行することはできません。fetchsaveCollection.localStorage

これには2つのオプションがあります。

  1. サーバーからデータを取り込む初期値fetchを実行してから、localStorageプロパティを設定します。

    var self = this;

self.collection.fetch().done(function() {
    self.collection.localStorage = new Backbone.LocalStorage("AzStore");
    self.render();
});

  2. 現在のようにプロパティを設定し、ローカルストレージアダプタによって指定されたエイリアスであるCollection.localStorageを使用して手動で初期データセットをフェッチします。Backbone.ajaxSyncBackbone.sync

    Backbone.ajaxSync('read', self.collection).done(function() {
    self.render();
}

後者のオプションは、必要に応じて後でサーバーからデータをロードすることを妨げないため、好ましい場合があります。

コレクションのメソッドとして機能を非常にきれいにラップすることができます。

var AzCollection = Backbone.Collection.extend({
    localStorage: new Backbone.LocalStorage('AzStore'),
    refreshFromServer: function() {
        return Backbone.ajaxSync('read', this);    
    }    
});

サーバーからデータをロードする場合は、次のメソッドを呼び出すことができます。

collection.refreshFromServer().done(function() { ... });

また、ローカルストレージを使用する場合は、ネイティブを使用できますfetch。

collection.fetch().done(function() { ... });

ドライブバイグーガーの利益のためにサンプルコードの間違いを修正するために編集されました。

于 2012-12-28T15:04:45.760 に答える