ruby-on-rails-3 - Backbone.js 集合 url

Question

我正在使用 rails api 开发一个 backbone.js 应用程序，它提供如图所示的 json:

   [{
        "title": "Da vinci Code",
        "price": "50"
    },
    {
        "title": "Some other name",
        "price": "45"
    }],

待办事项:

1. 当用户访问 url "www.backboneapp.com/authors/1" 时，它应该显示属于该作者的图书列表。

进度: - 服务器端 Rails [authorscontroller#show]

def show
  @author = Author.find(params[:id])
  @books  = @author.books
  respond_to do |format|
    format.json { render :json => @books }
    format.html
  end
end

2.Client-side-Backbone.js

路由器:

routes: {
  'authors/:id': 'showauthor'
},

showauthor: function(id) {

  $('#container').empty();
  window.available_books = new AvailableBookList({
    id: id
  });

  this.availablebooklistview = new AvailableBookListView({
    id: id,
    collection:  available_books
  });

  $('#container').append(this.availablebooklistview.render().el);
}

AvailableBookList 集合:

AvailableBookList = Backbone.Collection.extend({
  model: AvailableBook,
  url: "/authors/" + this.id  
})

View 部分:

$(document).ready(function(){

AvailableBookListView = Backbone.View.extend({
  tagName:   'section',
  className: 'availablebooklist',

  initialize: function() {
    _.bindAll(this, 'render');
    this.collection.bind('reset', this.render);
  },

  render: function() {
    this.collection.each(function(available_book) {
      var view = new AvailableBookView({
         model: available_book,
      });

      this.$('.availablebooklist').append(view.render().el);
    });
    return this;
  }
});

});

问题:当我访问“www.backboneapp.com/authors/1” 时出现 404 错误。在 console.log 它显示: 获取:www.backboneapp.com/authors/undefined

在 Rails 日志中:parameters {id => undefined}

*我哪里错了？ *

非常感谢任何帮助和建议

Answer 1

我假设您在路由器中的意思不是new AuthorList，而是new AvailableBookList。

你的收藏有两个问题:

1. 在您的 url 定义中，this 指的是 window 对象。
2. 您在构造函数中传递的 id 参数未应用于您的集合实例。这种方式仅适用于 View (不适用于模型或集合)。

要解决第一个问题，您可以使用一个函数来定义一个集合 url，这会将您置于正确的范围内:

AvailableBookList = Backbone.Collection.extend({
  model: AvailableBook,
  url: function() {
    return "/authors/" + this.id;
  }
});

对于第二个，您可以定义一个initialize 函数并在其中设置id 属性:

AvailableBookList = Backbone.Collection.extend({
  initialize: function(models, options) {
    this.id = options.id;
  },
  model: AvailableBook,
  url: function() {
    return "/authors/" + this.id;
  }
});

为了便于阅读，我还建议将 id 重命名为 author_id:

AvailableBookList = Backbone.Collection.extend({
  initialize: function(models, options) {
    this.author_id = options.author_id;
  },
  model: AvailableBook,
  url: function() {
    return "/authors/" + this.author_id;
  }
});

更新

您还以错误的方式初始化了您的收藏。根据Backbone.js source , 构造函数签名是 models, options:

window.available_books = new AvailableBookList(null, {
  id: id
});