Question

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

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

My 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（它只有一个索引方法）和一个帖子#Controller。

我将页面#index指定为根路径。页面#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>

帖子#Dedex喜欢这个：

def index
    @posts  = Post.all

    render json: @posts
end

（帖子对象有两个属性，一个是标题，一个是内容。）

我看到来自/ 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

开始获取127.0.0.1的“/assets/backbone-min.map”

ActionController :: RoutingError（没有路由匹配[GET]“/assets/backbone-min.map”）

Answer 1

您是否在backbone.js文件中包含了backbone.js？

有关详细信息，请参阅此slideshow。

Answer 2

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

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

此代码将收听同步＆＃39; this.collection上的事件，然后在触发时调用this.render。

你也可以删除postIndexView.render（）;来自页面#index视图，因为它实际上没有做任何事情。

我如何让Rails与Backbone.js一起使用？

2 个答案: