我怎样才能使 Rails 与 Backbone.js 一起工作？答案

【问题标题】：How Could I Make Rails Work With Backbone.js?我怎样才能使 Rails 与 Backbone.js 一起工作？
【发布时间】：2014-04-23 05:32:03
【问题描述】：

我已经完成了 CodeSchool 的 Backbone.js 剖析课程，我尝试将它与 Rails 一起使用。

但我不知道为什么它不起作用....

我的 Backbone.js 代码：

var PostModel = Backbone.Model.extend({
    defaults: {
        id: 0,
        title: "",
        content: ""
    }
});

var PostList = Backbone.Collection.extend({
    url: '/posts',
    model: PostModel
});


var PostView = Backbone.View.extend({
    tagName: 'p',
    template: _.template(
        '<h1>' + '<%= title %>' + '</h1>' + '<br />' +
        '<%= content %>'
    ),
    render: function(){
        this.$el.html(this.template(this.model.attributes));
    }
});


var PostIndexView = Backbone.View.extend({
    addOne: function(post){
        var postView = new PostView({model: post});
        postView.render();
        this.$el.append(postView.el);
    },
render: function(){
    this.collection.forEach(this.addOne, this);

}
});

我有一个 Pages#Controller（它只有一个 index 方法）和一个 Posts#Controller。

我将 pages#index 指定为根路径。 pages#index 视图喜欢以下内容：

<h1 id="heading">Index Posts</h1>

<div id="posts"></div>

<script type="text/javascript" charset="utf-8">
    var postModel = new PostModel();
    var postList = new PostList({model: postModel});
    postList.fetch();

    var postIndexView = new PostIndexView({collection: postList});

    postIndexView.render();
    $('#posts').html(postIndexView.el);

</script>

Posts#Index 喜欢这个：

def index
    @posts  = Post.all

    render json: @posts
end

（一个post Object有两个属性，一个是title，一个是content。）

我看到 /posts 路径的响应是这样的：

[{"id":3,"title":"hi","content":"hi","created_at":"2014-04-18T03:50:51.444Z","updated_at":"2014-04-18T03:50:51.444Z"},{"id":4,"title":"post2","content":"post2\r\n","created_at":"2014-04-18T04:07:20.550Z","updated_at":"2014-04-18T04:07:20.550Z"}]

但是每当我使用浏览器访问 root_url 时，什么都没有发生。

谁能帮帮我...谢谢...

更新：

我错过了一件没有提到的事情，我看到了以下错误：

在 2014-04-19 05:37:52 +0800 开始为 127.0.0.1 获取“/assets/underscore-min.map” ActionController::RoutingError (没有路由匹配 [GET] "/assets/underscore-min.map"):

在 2014-04-19 05:37:52 +0800 开始 GET "/assets/backbone-min.map" for 127.0.0.1

ActionController::RoutingError (没有路由匹配 [GET] "/assets/backbone-min.map")

【问题讨论】：

Backbone 之前是否包含了 jQuery 和 Underscore？
是因为postList.fetch() 是一个AJAX 调用，而您没有在postList 上收听任何事件吗？尝试postList.fetch({ reset: true })，然后在渲染之前监听来自postList 的'reset' 事件。
我更新了内容以包含我看到的错误消息。为什么它会显示此错误？
不要担心源地图的 404。你的控制器被调用了吗？它返回正确的东西吗？您是否考虑了 Backbone fetch 调用的异步性质？

标签： ruby-on-rails backbone.js

【解决方案1】：

您是否在 application.js 文件中包含了主干.js？

查看slideshow了解更多详情。

【讨论】：

是的，但是我直接从Backbone.js官网下载并包含在application.js中。
您看过幻灯片吗？我使用该幻灯片制作了一个解决方法。
好的，我会在空闲时间检查。不过正常情况下，虽然我是直接从官网下载的，应该可以的吧？
最好的方法是从github下载。它应该可以工作，但有时您的系统不满足所需的依赖项。

【解决方案2】：

您没有看到任何内容被渲染，因为渲染函数在获取操作完成之前执行。在移动到下一行代码之前，Javascript 不会等待异步事件完成。要解决此问题，您需要修改视图以在获取操作完成后调用 render()。当一个集合或模型完成获取时，它们将触发一个“同步”事件，视图或包含对象可以监听该事件。您需要做的就是让视图监听集合的同步事件，然后调用渲染。将以下代码放在视图的初始化函数中以创建此绑定：

this.listenTo(this.collection, "sync", this.render);

此代码将监听 this.collection 上的 'sync' 事件，然后在触发时调用 this.render。

你也可以删除 postIndexView.render();从 pages#index 视图中也是如此，因为它实际上并没有做任何事情。

【讨论】：