Backbone.js和本地存储. & quot; URL& amp; quot;必须指定属性或功能 [英] Backbone.js and local storage . A "url" property or function must be specified

问题描述

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

I'm improving my knowledge about Backbone.js and have this code sample taken from a tutorial. (http://bardevblog.wordpress.com/2012/01/16/understanding-backbone-js-simple-example/)

此示例目前将无法访问服务器，因此为了模拟从服务器中检索数据，我有一个文件名movie.json.

This example will not access the server for now, so to simulate the retrieval of data from the server I have a file name movies.json.

我正在尝试做的事情:

• 使用本地存储适配器在本地存储中添加json数据
• 为此，我使用的是Backbone.ajaxSync，它由localStorage适配器提供给别名Backbone.sync:我创建了refreshFromServer()方法来实现此目的
• 之所以这样做，是因为我试图实现一种仅一次获取数据(并且仅在需要时刷新)的方法

我的问题: 调用refreshFromServer()时出现错误"未捕获的错误:必须指定'url'属性或功能". 我不明白为什么，因为我设置了网址集合. (网址:"scripts/data/movies.json")

My issues:   I'm having an error "Uncaught Error: 'url' property or function must be specified" when I call refreshFromServer (). I do not understand why because I set the url collection. (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属性

• If a comment localStorage property in the collection

Theater.Models.Movie = Backbone.Model.extend({}) Theater.Collections.Movies = Backbone.Collection.extend({ 型号:Theatre.Models.Movie， //localStorage:新的Backbone.LocalStorage("MovieStore") ... });

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

然后在路由器中调用普通的提取方法

and then in router call normal fetch method

Theater.Router = Backbone.Router.extend({ 路线:{ ":"defaultRoute" }

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列表

I can see the json list correctly in my view

• 如果我在集合中使用localStorage属性，然后调用标准的fetch()方法，则只会看到一个空列表(我认为这是正常的，因为它是从本地存储中读取的并且是空的)

• If I use the localStorage property in the collection and then call the standard fetch () method, I see only an empty list (I think it is normal as it is read from the local storage and is empty)

仅在使用refreshFromServer()方法并且使用Backbone.ajaxSync(bone.sync的别名)时发生错误

The error only occurs when using the method refreshFromServer () witch use Backbone.ajaxSync (alias for backbone.sync)

推荐答案

错误...糟糕. refreshFromServer实现来自我对您的先前问题的回答. ，这是完全无用的错误.

Err... my bad. The refreshFromServer implementation is from my answer to your earlier question., and it's completely, uselessly wrong.

Backbone.sync需要参数(method, model, options)，但就目前而言，它无法从refreshFromServer中获得所需的内容，因为refresh方法只是向前发送得到的任何arguments.对不起，这个错误.

Backbone.sync expects arguments (method, model, options), but as it stands, it doesn't get what it needs from refreshFromServer because the refresh method simply sends forward whatever arguments it gets. Sorry for the mistake.

正确，有效的实现方式是:

The correct, working implementation would be:

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

它可以通过传递到options哈希的success/error回调来使用:

It can be used either via success / error callbacks passed to the options hash:

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

或通过jqXHR Promise API:

Or via the jqXHR Promise API:

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

还是不注册回调并像您的示例那样等待集合reset事件:

Or not signing up for callbacks and waiting for the collection reset event like in your example:

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

这应该有效.请告诉我是否可以.我也将上一个问题的答案固定下来，以防有人偶然发现.

This should work. Please let me know if it doesn't. I fixed my answer in the previous question too, in case someone stumbles onto it.

编辑:要在刷新后将数据保存到本地存储，您需要手动save每个模型:

To save the data to local storage after refreshing you need to manually save each of the models:

var collection = this.collection;
collection.refreshFromServer({success: function(freshData) {
    collection.reset(freshData);
    collection.each(function(model) {
        model.save();
    });
}});

这篇关于Backbone.js和本地存储. & quot; URL& amp; quot;必须指定属性或功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！