javascript - 使用 backbone.js 组织 subview ？

Question

很抱歉我是 backbone 的新手，但我想我已经理解了这些概念。

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

您将如何组织它以便可以像这样控制 View :

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

这是正确的做法吗？

Answer 1

是的，这是可能的，我为您创建了一个工作示例，我认为这只是组织您的 Backbone JS 架构的另一种方法，我认为这是一个非常好的主意。

说明

所有模型必须有:

• 一个render 方法，它调用其 View 的render 方法。我创建了一个基本模型，我为书架、书籍和页面模型进行了扩展。

• initialize 方法，它创建集合(书架的书，书的页......)

最后我实例化了 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()

带注释的代码可在此处获得: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' },
            ]
          }
        ]
      }
    ]
};