Backbone.js集合url

rai*_*per 3 backbone.js ruby-on-rails-3

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

   [{
        "title": "Da vinci Code",
        "price": "50"
    },
    {
        "title": "Some other name",
        "price": "45"
    }],
Run Code Online (Sandbox Code Playgroud)

去做:

  1. 当用户访问网址" 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
Run Code Online (Sandbox Code Playgroud)

2.Client侧-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);
}
Run Code Online (Sandbox Code Playgroud)

AvailableBookList Collection:

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

查看部分:

$(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;
  }
});

});
Run Code Online (Sandbox Code Playgroud)

问题:当我访问" www.backboneapp.com/authors/1"时,我收到404错误.在console.log中显示:get:www.backboneapp.com/authors/ undefined

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

*我哪里错了?*

任何帮助和建议都非常感谢

Ben*_*ret 7

我会假设你new AuthorList在路由器中没有意思,而是new AvailableBookList.

您的收藏中有两个问题:

  1. 在你的url的定义中,this指的是window对象.
  2. id您在构造函数中传递的参数不会应用于您的集合实例.它仅适用于视图(不适用于模型或集合).

要解决第一个问题,您可以使用函数来定义集合URL,这将使您进入正确的范围:

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

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

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

出于可读性目的,我还建议重命名idauthor_id:

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

更新

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

window.available_books = new AvailableBookList(null, {
  id: id
});
Run Code Online (Sandbox Code Playgroud)