没有提取正确的网址问题(Not fetching correct url issue)

没有提取正确的网址问题(Not fetching correct url issue)

我有一个使用路由器的backboneJS应用程序

var StoreRouter = Backbone.Router.extend({ routes: { 'stores/add/' : 'add', 'stores/edit/:id': 'edit' }, add: function(){ var addStoresView = new AddStoresView({ el: ".wrapper" }); }, edit: function(id){ var editStoresView = new EditStoresView({ el: ".wrapper", model: new Store({ id: id }) }); } }); var storeRouter = new StoreRouter(); Backbone.history.start({ pushState: true, hashChange: false });

和一个看起来像这样的模型：

var Store = Backbone.Model.extend({ urlRoot: "/stores/" });

然后我的观点看起来像：

var EditStoresView = Backbone.View.extend({ ... render: function() { this.model.fetch({ success : function(model, response, options) { this.$el.append ( JST['tmpl/' + "edit"] (model.toJSON()) ); } }); }

我认为urlRoot在获取时会调用/ stores / ID_HERE ，但是现在它不会调用它，它只是调用/ stores / ，但我不确定为什么以及如何解决这个问题？

在devTools中，这是它的目标：

GET http://localhost/stores/

I have a backboneJS app that has a router that looks

var StoreRouter = Backbone.Router.extend({ routes: { 'stores/add/' : 'add', 'stores/edit/:id': 'edit' }, add: function(){ var addStoresView = new AddStoresView({ el: ".wrapper" }); }, edit: function(id){ var editStoresView = new EditStoresView({ el: ".wrapper", model: new Store({ id: id }) }); } }); var storeRouter = new StoreRouter(); Backbone.history.start({ pushState: true, hashChange: false });

and a model that looks like:

var Store = Backbone.Model.extend({ urlRoot: "/stores/" });

and then my view looks like:

var EditStoresView = Backbone.View.extend({ ... render: function() { this.model.fetch({ success : function(model, response, options) { this.$el.append ( JST['tmpl/' + "edit"] (model.toJSON()) ); } }); }

I thought that urlRoot when fetched would call /stores/ID_HERE, but right now it doesn't call that, it just calls /stores/, but I'm not sure why and how to fix this?

In devTools, here is the url it's going for:

GET http://localhost/stores/

最满意答案

这可能不是答案，因为它取决于您的实际生产代码。

通常你输入的代码应该可以工作，我甚至看到一条评论说它在一个jsfiddle中工作。 有几个原因可能会影响结果：

在您的代码中，您更改了Backbone.Model.url()函数。 默认情况下，url函数是

url: function() { var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url') || urlError(); if (this.isNew()) return base; return base.replace(/([^\/])$/, '$1/') + encodeURIComponent(this.id); },

这是Backbone用来为model.fetch();生成URL的model.fetch(); 。

当您将商店模型声明为数据库中的商店模型时，您添加了自定义idAttribute 。 例如，您的数据库具有与id本身不同的ID，但在您的代码中，您仍然使用new Model({ id: id }); 当你真的应该使用new Model({ customId: id }); 。 幕后发生的事情是你在url()函数中看到它检查模型是否为isNew() 。 这个函数实际检查是否设置了id ，但是如果它是自定义的，它会检查：

isNew: function() { return !this.has(this.idAttribute); },

你搞砸了Backbone.sync ......很多事情都可以做到这一点我甚至不会开始，除非我想写一篇论文。 也许您在不知道它可能会影响其他代码的情况下遵循教程。

你调用了model.fetch() “a la”$ .ajax样式：

model.fetch({ data: objectHere, url: yourUrlHere, success: function () {}, error: function () {} });

这超越了Backbone自动化的强大功能。 （我认为同步从这里接管，不要引用我的话）。

参考： Backbone注释源代码

This might not be the answer since it depends on your real production code.

Normally the code you entered is supposed to work, and I even saw a comment saying that it works in a jsfiddle. A couple of reasons might affect the outcome:

In your code you changed the Backbone.Model.url() function. By default the url function is

url: function() { var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url') || urlError(); if (this.isNew()) return base; return base.replace(/([^\/])$/, '$1/') + encodeURIComponent(this.id); },

This is the function to be used by Backbone to generate the URL for model.fetch();.

You added a custom idAttribute when you declared your Store Model to be like the one in your DB. For example your database has a different id than id itself, but in your code you still use new Model({ id: id }); when you really should use new Model({ customId: id });. What happens behind the scenes is that you see in the url() function it checks if the model isNew(). This function actually checks if the id is set, but if it is custom it checks for that:

isNew: function() { return !this.has(this.idAttribute); },

You messed up with Backbone.sync ... lots of things can be done with this I will not even start unless I want to make a paper on it. Maybe you followed a tutorial without knowing that it might affect some other code.

You called model.fetch() "a la" $.ajax style:

model.fetch({ data: objectHere, url: yourUrlHere, success: function () {}, error: function () {} });

This overrides the awesomeness of the Backbone automation. (I think sync takes over from here, don't quote me on that).

Reference: Backbone annotated sourcecode