使用backbone.js组织子视图？

Question

对于backbone我还比较新，但我认为我已经掌握了其概念。

例如：您有一个模型表示书店 > 书架 > 书本 > 页面

您该如何组织它，以便视图可以像这样进行控制：

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

这是正确的做法吗？

- sdfadfaasd

Answer 1

是的，这是可能的，我为您创建了一个可行的示例。我认为这只是组织Backbone JS架构的另一种方法，而且我认为这是个相当好的点子。

说明

所有的模型必须有：

• 一个render方法，它调用其视图的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' },
            ]
          }
        ]
      }
    ]
};

- Atinux

Answer 2

@Alley，你想做的事情违反了MVC模式，因为你的模型对象必须对视图保持不可知。 @Atinux的答案可能有效，但会在你的视图和模型对象之间引入直接依赖。

所有呈现方法都必须驻留在你的视图对象中。视图和模型之间的通信必须使用事件完成。 所以，不要这样做：Bookstore.bookshelf.get(shelfId).render() 你应该这样做：bookshelfView.render()

- eabait