使用Rails API的简单骨干示例

Question

因此，我使用rails-api gem创建了一个rails api。 然后，将主干代码放在默认的public / index.html中。 我尝试了json链接并返回json，它只是一个名为“ entry”的模型，其中只有一个名为“ content”的字段以及一些默认的rails字段。 但是主干代码不起作用，您能发现这个问题吗？ 我只是想显示返回的json的记录列表。

// Models
window.Entry = Backbone.Model.extend();
window.EntryCollection = Backbone.Collection.extend({
    model:Entry,
    url:"http://localhost:3000/entries"
});

// Views
window.EntryListView = Backbone.View.extend({
    tagName:'ul',
    initialize:function () {
        this.model.bind("reset", this.render, this);
    },
    render:function (eventName) {
        _.each(this.model.models, function (entry) {
            $(this.el).append("
" + entry.get("content") + "
");
        }, this);
        return this;
    }
});

// Router
var AppRouter = Backbone.Router.extend({
    routes:{
        "":"list"
    },
    list:function () {
        this.entryList = new EntryCollection();
        this.entryListView = new EntryListView({model:this.entryList});
        this.entryList.fetch();
        $('#entries').html(this.entryListView.render().el);
    }
});

var app = new AppRouter();
Backbone.history.start();

Answer 1

您可以检查/ entries是否返回“结果”节点？ 也许您在Rails中忘记了ActiveRecord :: Base.include_root_in_json = false？

Answer 2

在您的AppRouter代码中，您具有以下这一行：

this.entryListView = new EntryListView({model:this.entryList});

但是，entryList是一个Collection，而不是Model，因此您必须像这样定义它：

this.entryListView = new EntryListView({collection:this.entryList});

同样，在EntryListView代码中，您具有：

this.model.bind("reset", this.render, this);

...

_.each(this.model.models, function (entry) {

应该变成：

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

...

_.each(this.collection.models, function (entry) {

我不确定这是否是全部，但这是对我立即可见的唯一事情。

编辑：添加更改到this.model参考