Backbone.js 如何使用木偶收集视图从服务器获取数据？

我试图创建一个简单的木偶（2.3.2）应用程序，从RESTFUL web服务检索数据， 我做错了什么？如何修复此代码？这个示例应用程序的最佳结构是什么

下面是JSFIDLE上的代码：

这是我的密码：

var Library = new Backbone.Marionette.Application();

var LayoutView = Backbone.Marionette.LayoutView.extend({
    el: 'body',
    template: '#content-template',

    regions: {
        mainRegion: "#main-region",
        collectionRegion: "#collection-region"
    }
});

var Book = Backbone.Model.extend({
    url: "http://localhost:9090/library-0.1/books"
});

var MyChildView = Backbone.Marionette.ItemView.extend({
    model: Book,
    tagName: 'li',
    template: '#list-template',
});

var BooksCollection = Backbone.Collection.extend({
    url: 'http://localhost:9090/library-0.1/books',
    model: Book
});

var collection1 = new BooksCollection({
    model: Book
});

var MyCollectionView = Backbone.Marionette.CollectionView.extend({
    url: "http://localhost:9090/library-0.1/books",
    tagName: 'ul',
    childView: MyChildView,
    collectionEvents: {
        'sync': 'render'
    },
});

var c = new MyCollectionView({
    collection: collection1
});

Library.layout_view = new LayoutView();
Library.layout_view.render();
Library.layout_view.collectionRegion.show(c);

Library.start();

我的模板是：

<script id="list-template" type="text/template">
        <h2><%=title %></h2>
        <span><%=author %></span>

        <button>Click Here</button>
    </script>

    <script id="content-template" type="text/template">
        <h1>This is Lesson 1</h1>
        <div id="main-region" class="content">
        </div>

        <hr>

        <div id="collection-region"></div>
    </script>

点击这里
这是第1课

CollectionView

不提取数据，而是将其呈现为主干。Collection负责提取数据

在

MyCollectionView

木偶有

collectionEvents

，您可以使用与

modeleevents

相同的方法来使用它，因此您的初始化可以替换为

collectionEvents: {
    'reset': 'render'
    'change': 'render'
}

然后打电话，我会分开做

`collection1.fetch()` explicitly

要获得良好的木偶应用程序结构，请查看：

---

好的，这解决了一个问题，现在我看到了包含已获取数据的集合，但我注意到它访问了render（）函数两次，第一次是在获取之前，它显示了包含默认模型数据的集合，第二次显示了所有已获取的数据！如何使其渲染一次？我希望仅在获取后渲染它，这是因为您定义了集合事件。您可以将collectionEvents限制为{“sync”：“render”}，并且它将仅在获取时重新呈现。我将代码放在上面。您可以在那里查看并帮助我修复它吗？