木偶应用程序的 ChildView 错误答案

【问题标题】：ChildView error with Marionette app木偶应用程序的 ChildView 错误
【发布时间】：2014-07-05 05:31:06
【问题描述】：

我是骨干和木偶的新手，我从 Packpub 出版的《Getting Started with Backbone Marionette》一书中学到了这一点。
我收到错误为Uncaught NoChildViewError: A "childView" must be specified 我的代码是

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Marionette test app</title>
  <link  rel="stylesheet" media="screen" href="{{ url_for('static', filename='bootstrap.css') }}">
   <style type="text/css">
        .container {
            margin-top: 10px;
        }
         body {
            padding-top: 60px;
            padding-bottom: 40px;
         }

   </style>
</head>
<body>

<div id="container" class="well">
    <h2>Marionette Views- CollectionView</h2>
</div>

 <script id="categoryTemplate" type="text/template">
    <a href="#<%= name%>" ><%= name%> (<%= booksOnCategory %>)</a>
        <button class="info">Details</button>
</script>


<script src="{{ url_for('static', filename='jquery.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap.js') }}"></script>
<script src="{{ url_for('static', filename='underscore.js') }}"></script>
<script src="{{ url_for('static', filename='backbone.js') }}"></script>
<script src="{{ url_for('static', filename='backbone.marionette.js') }}"></script>


<script type="application/javascript">
    // lets create new application as below;
    var BookStoreApp = new Backbone.Marionette.Application();


    var BookStoreController = Backbone.Marionette.Controller.extend({
        displayBooks : function(){
            console.log("I will display books");
        }
    });

    var BookStoreRouter = Backbone.Marionette.AppRouter.extend({
        controller : BookStoreController,
        appRoutes : {
            "":"displayBooks"
        }
    });

    BookStoreApp.addInitializer(function(){
        var controller = new BookStoreController();
        var router = new BookStoreRouter({controller: controller});
        console.log("Hello from addInit");
    });

    BookStoreApp.on("initialize:after", function(){
        if (Backbone.history){
            Backbone.history.start();
            console.log("hello from initialize:after.. .");
        }

    });


    BookModel = Backbone.Model.extend({
        defaults : {
            name : "",
            booksOnCategory:0
        }
    });

    BookCollection = Backbone.Collection.extend({
        model : BookModel
    });

    var bookModel = new BookModel({name:"Math", booksOnCategory:3});
    var bookModel2 = new BookModel({name:"Art", booksOnCategory:5});
    var bookModel3 = new BookModel({name:"Science", booksOnCategory:6});
    var bookModel4 = new BookModel({name:"Biology", booksOnCategory:1});
    var bookCollection = new BookCollection([bookModel, bookModel2, bookModel3, bookModel4]);

    var BookView = Backbone.Marionette.ItemView.extend({
        template : '#book-template',
        tagName: 'li',
        events:{
            "mouseenter .info": "showDetails",
            "mouseleave .info": "hideDetails"
        },
        showDetails: function(){
            this.$(".info").popover({
                title: this.model.get('name'),
                content: "we have "+ this.model.get("booksOnCategory") + " left"
            });
            this.$(".info").popover("show");
        },
        hideDetails: function(){
            this.$(".info").popover("hide");
        }
    });

    CategoriesVieww = Backbone.Marionette.CollectionView.extend({
        tagName: 'ul',
        className: "unstyled",
        itemView: BookView
    });

    var CategoriesView = new CategoriesVieww({
        collection: bookCollection,
        el: "#container" });

    CategoriesView.render();

    BookStoreApp.start();

</script>

</body>
</html>

注意：我正在 flask-jinja2 应用程序上测试这个应用程序；所以忽略脚本标签中的url_for；因为它们是 jinja2 所要求的

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

看起来问题正是错误消息所说的 ;) CollectionView 是作为一系列子视图生成的，您 need to tell the collection view 要为这些子视图使用哪种视图类型。

但你没有。也许只是一个错字？尝试将您的 CategoriesVieww 更改为

CategoriesVieww = Backbone.Marionette.CollectionView.extend({
    tagName: 'ul',
    className: "unstyled",
    childView: BookView    // <-- here
});

【讨论】：

@namit marionette 不久前更新到 2.0，我记得读过他们更改的其中一件事是将 itemView 重命名为 childView。它发生在最近，许多资源书籍可能还没有机会更新。完整的更改日志可以在这里找到，因为有一些名称更改可能会让您在使用以前版本的资源时发现docs.google.com/document/d/…跨度>
会小心。我用新的库版本尝试了以下教程：davidsulc.com/blog/2013/02/03/… 它与以前的版本完美配合，但现在行为似乎发生了变化，并且没有按预期工作。

【解决方案2】：

如果您使用的是 collectionView 或 Marionette 2.2.0 或更高版本的复合视图，请注意 API 关键字已更改如下：

itemView 现在被称为 childView itemViewContainer 现在称为 childViewContainer

2.2.0 之前

CategoriesView = Backbone.Marionette.CompositeView.extend({
    template: '#template',
    className: "unstyled",
    itemView: BookView    // <-- here
    itemViewContainer: "#books-list"
});

我花了一段时间才通过 Firebug 调试器弄明白。您可以参考https://docs.google.com/document/d/1fuXb9N5LwmdPn-teMwAo3c8JTx6ifUowbqFY1NNSdp8/edit# 了解 API 更改。并非所有更改都记录在我能找到的任何地方。

2.2.0 之后：

CategoriesView = Backbone.Marionette.CompositeView.extend({
    template: '#template',
    className: "unstyled",
    childView: BookView    // <-- here
    childViewContainer: "#books-list"
});

【讨论】：