3

我正在提高对 Backbone.js 的了解，并从教程中获取此代码示例。（http://bardevblog.wordpress.com/2012/01/16/understanding-backbone-js-simple-example/）

这个例子暂时不会访问服务器，所以为了模拟从服务器检索数据，我有一个文件名movies.json。

我正在尝试做的事情：

  • 在本地存储中添加 json 数据（使用 localStorage 适配器）
  • 为此，我使用 Backbone.ajaxSync，它由 localStorage 适配器赋予别名 Backbone.sync：我创建了方法 refreshFromServer () 来执行此操作
  • 这样做的原因是我试图实现一种只获取一次数据的方法（并且只在需要时刷新）

我的问题：当我调用 refreshFromServer () 时，出现错误“未捕获的错误：必须指定 'url' 属性或函数”。我不明白为什么，因为我设置了 url 集合。（网址：“脚本/数据/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") 。 .. });

    然后在路由器中调用正常的 fetch 方法

    Theater.Router = Backbone.Router.extend({ routes : { "" : "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 () 巫婆使用 Backbone.ajaxSync（backbone.sync 的别名）时发生

4

1 回答 1

4

呃……我的错。refreshFromServer实施来自我对您之前问题的回答。，这完全是无用的错误。

Backbone.sync期望 arguments (method, model, options)，但就目前而言，它没有得到它需要的东西，refreshFromServer因为 refresh 方法只是将arguments它得到的东西发送出去。对不起这个错误。

正确的工作实施将是：

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 回答