使用backbone.js来组织子视图?

我为与骨干新人道歉,但我想我得到的概念。

例如:您有书店>书架>书籍>页面的模型

你将如何组织这个视图可以像这样控制:

Bookstore.render() //to view the bookstore Bookstore.bookshelf.get(shelfId).render() //to view shelf Bookstore.bookshelf.get(shelfId).book.get(bookId).render() //to view book Bookstore.bookshelf.get(shelfId).books.get(bookId).pages.at(0).render() //to view page 

这是正确的方法吗?

是的这是可能的 ,我为你创build了一个工作的例子,我认为这只是另一种方法来组织你的骨干JS架构,我认为这是一个不错的主意。

吃茶

所有的模型必须有:

  • 一个调用其视图的render方法的render方法。 我创build了一个扩展为Bookshelf,Book和Page模型的基本模型。

  • 一个initialize方法,它创build集合(书架上的书,书的页…)

最后,我实例化了Bookstore模型,并完成了!

演示: http : //jsfiddle.net/Atinux/DvbA3/show/

尝试在控制台中:

 Bookstore.render() Bookstore.bookshelves.get(1).render() Bookstore.bookshelves.get(1).books.get(2).render() Bookstore.bookshelves.get(1).books.get(2).pages.at(0).render() 

带有注释的代码可以在这里find: http : //jsfiddle.net/Atinux/DvbA3/

我认为最好的办法是了解代码的工作方式。 随意问我是否有问题要理解我的代码。

JSON数据

JSON数据必须如下所示:

 var data = { bookshelves: [{ id: 1, name: 'Science', books: [{ id: 1, name: 'Abstract Algebra', pages: [ { content: 'Page 1 Abstract'}, { content: 'Page 2 Abstract'}, { content: 'Page 3 Abstract'} ] }, { id: 2, name: 'Chemistry and Technology of Fertilizers', pages: [ { content: 'Chemistry page 1' }, { content: 'Chemistry page 2' }, { content: 'Chemistry page 3' } ] } ] }, { id: 2, name: 'Psychology', books: [{ id: 1, name: 'How to Think Straight About Psychology', pages: [ { content: 'Psychology page 1' }, { content: 'Psychology page 2' }, ] } ] } ] }; 

@Alley,你想做什么违背了MVC模式,因为你的模型对象必须是不可知的视图。 @Atinux答案可能工作,但介绍了视图和模型对象之间的直接依赖关系。

所有的表示方法都必须驻留在查看对象中。 视图和模型之间的交stream必须使用事件来完成。 所以,而不是做:Bookstore.bookshelf.get(shelfId).render()你应该做这样的事情:bookshelfView.render()