3

私は Backbone.js に関する知識を深めており、チュートリアルからこのコード サンプルを取得しています。( http://bardevblog.wordpress.com/2012/01/16/understanding-backbone-js-simple-example/ )

この例では今のところサーバーにアクセスしないので、サーバーからのデータの取得をシミュレートするために、movies.json というファイル名を使用しています。

私がやろうとしていること:

  • json データをローカル ストレージに追加します (localStorage アダプターを使用)
  • このために、localStorage アダプターによってエイリアス Backbone.sync に与えられる Backbone.ajaxSync を使用しています。これを行うために、refreshFromServer () メソッドを作成しました。
  • これを行う理由は、データを 1 回だけ取得する方法を実装しようとしている (必要なときにのみ更新する) ためです。

私の問題: refreshFromServer () を呼び出すと、「 Uncaught Error: 'url' property or function must be specified 」というエラーが発生します。url コレクションを設定しているため、理由がわかりません。(url : "scripts/data/movies.json" )

サンプルコード

var Theater = {
    Models : {},
    Collections : {},
    Views : {},
    Templates : {}
}

Theater.Models.Movie = Backbone.Model.extend({})
Theater.Collections.Movies = Backbone.Collection.extend({
    model : Theater.Models.Movie,
    localStorage : new Backbone.LocalStorage("MovieStore"), // Unique name within your app.
    url : "scripts/data/movies.json",
    refreshFromServer : function() {
        return Backbone.ajaxSync.apply(this, arguments);
    },
    initialize : function() {
        console.log("Movies initialize")
    }
});

Theater.Templates.movies = _.template($("#tmplt-Movies").html())

Theater.Views.Movies = Backbone.View.extend({
    el : $("#mainContainer"),
    template : Theater.Templates.movies,

    initialize : function() {

        this.collection.bind("reset", this.render, this);
    },

    render : function() {
        console.log("render")
        console.log(this.collection.length);

    }
})

Theater.Router = Backbone.Router.extend({
    routes : {
        "" : "defaultRoute"
    },

    defaultRoute : function() {
        console.log("defaultRoute");
        Theater.movies = new Theater.Collections.Movies()
        new Theater.Views.Movies({
            collection : Theater.movies
        });
        Theater.movies.refreshFromServer();
        //Theater.movies.fetch();
        console.log(Theater.movies.length)
    }
})

var appRouter = new Theater.Router();
Backbone.history.start();

ノート：

  • コレクション内のコメント localStorage プロパティの場合

    Theater.Models.Movie = Backbone.Model.extend({}) Theater.Collections.Movies = Backbone.Collection.extend({ model : Theater.Models.Movie, //localStorage : new Backbone.LocalStorage("MovieStore") . ..});

    次に、ルーターで通常のフェッチメソッドを呼び出します

    Theater.Router = Backbone.Router.extend({ ルート : { "" : "defaultRoute" },

    defaultRoute : function() {

    Theater.movies = new Theater.Collections.Movies()
    new Theater.Views.Movies({
        collection : Theater.movies
    });
    //Theater.movies.refreshFromServer();
    Theater.movies.fetch();
}

    }))

ビューでjsonリストを正しく表示できます

  • コレクションで localStorage プロパティを使用してから標準の fetch() メソッドを呼び出すと、空のリストしか表示されません (ローカル ストレージから読み取られて空なので正常だと思います)。

  • エラーはメソッド refreshFromServer () witch use Backbone.ajaxSync (backbone.sync のエイリアス) を使用する場合にのみ発生します。

4

1 に答える 1

4

うーん…悪い。実装は、以前の質問refreshFromServerに対する私の回答からのものです。、そしてそれは完全に、無駄に間違っています。

Backbone.syncは引数を期待していますが、現状では、refresh メソッドは取得したものを単に転送するだけなので、(method, model, options)必要なものを取得できません。間違いをお詫び申し上げます。refreshFromServerarguments

正しく動作する実装は次のようになります。

refreshFromServer : function(options) {
    return Backbone.ajaxSync('read', this, options);
}

success/ハッシュerrorに渡されたコールバックを介して使用できます。options

this.collection.refreshFromServer({ success: function() { /* refreshed... */ });

または jqXHR Promise API 経由:

this.collection.refreshFromServer().done(function() { /* refreshed... */ })

または、コールバックにサインアップせずreset、例のようにコレクション イベントを待機します。

this.collection.bind("reset", this.render, this);
this.collection.refreshFromServer();

これはうまくいくはずです。そうでない場合はお知らせください。誰かがつまずいた場合に備えて、前の質問の回答も修正しました。

編集:save更新後にデータをローカル ストレージに保存するには、各モデルを手動で行う必要があります。

var collection = this.collection;
collection.refreshFromServer({success: function(freshData) {
    collection.reset(freshData);
    collection.each(function(model) {
        model.save();
    });
}});
于 2013-01-11T23:30:20.660 に答える