如何使用木偶CollectionView从服务器获取数据?

时间:2015-02-16 02:38:03

标签: backbone.js marionette

我正在尝试创建一个简单的Marionette(2.3.2)应用程序,它从RESTFUL Web服务中检索数据, 我做错了什么?如何修复此代码?这个示例应用程序的最佳结构是什么?

这里是jsfiddle上的代码: http://jsfiddle.net/kdureidy/zaze13fw/

这是我的代码:

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 个答案:

答案 0 :(得分:1)

  1. CollectionView无法获取数据,而是呈现数据,Backbone.Collection是负责获取数据的数据。

  2. 您不需要MyCollectionView

  3. 中的网址
  4. Marionette有collectionEvents,您可以使用与modelEvents相同的方式,因此您的初始化可以替换为

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

    并打电话,我会分开做

    `collection1.fetch()` explicitly
    
  5. 对于好的Marionette应用程序结构,请查看:http://www.backbonerails.com/

相关问题