为什么我的Backbone Collection没有提取数据?

时间:2015-03-04 05:32:45

标签: javascript backbone.js marionette

我没有收到任何错误,但由于某种原因我的数据没有加载到我的视图中。我使用的是Requirejs和Marionette。我已经盯着这么久了,它可能就在我面前,我只是有了隧道视野而且看不到它。这是我的文件:

这是我的main.js:

    define([
        "jquery",
        "underscore",
        "backbone",
        "marionette",
        "app/views/Listings",
        "app/collections/ListingsCollection"], function($, _, Backbone, Marionette, Listings, ListingsCollection){

        "use strict";

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

        App.addRegions({
            listingRegion: "#listingsView"
        });

        var listingsCollection = new ListingsCollection();
        listingsCollection.fetch().done(function () {
            var listingsView = new Listings({collection: listingsCollection});
            App.listingRegion.show(listingsView);    
        });

        App.start();
        Backbone.history.start();
    });

这是我的ListingsItemView.js

    define(['marionette', 'tpl!app/views/templates/Listings'],
        function (Marionette, template) {
        "use strict";

        var ListingsItemView = Marionette.ItemView.extend({
            template: template()
        });
        return ListingsItemView;
    });

这是我的ListingsCollectionView.js: (注意:初始化方法下的console.log不会出现在控制台中。)

define(['marionette', 'backbone', 'app/views/ListingsItemView'], function (Marionette, Backbone, ListingsItemView) {
    'user strict';

    var ListingsCollectionView = Backbone.Marionette.CollectionView.extend({

        initialize: function() { 
            console.log('Collection view log: ' + this.collection); 
        },

        childView: ListingsItemView,
        tagName: 'ul'

    });

    return ListingsCollectionView;

});

这是我的模板,其中应该加载数据:

<div>
    <h1>LISTINGS</h1>
    <ul>

    </ul>
</div>

这是我的ListingsModel.js:

define(['marionette', 'backbone'], function (Marionette, Backbone) {
    'use strict';

    var ListingsModel = Backbone.Model.extend({

    });
    return ListingsModel;
});

最后,这是我的ListingsCollection.js:

define(['backbone', 'marionette', 'app/models/ListingsModel'], function (Backbone, Marionette, ListingsModel) {
    'user strict';

    var ListingsCollection = Backbone.Collection.extend({
        model: ListingsModel,
        url: 'http://localhost:1337/post'
    });
    return ListingsCollection;
});

注意:运行此应用时,我在控制台中没有出现任何错误。我只是没有加载任何数据。网址http://localhost:1337/post通过Postman Chrome扩展程序成功发送此数据:

[
    {
        "userID": "54e6a5de61505403004698d8",
        "title": "Granite counter tops",
        "description": "I'm looking for granite counter tops for my kitchen. Willing to trade my skill set.",
        "email": "email@gmail.com",
        "createdAt": "2015-02-20T03:12:46.349Z",
        "updatedAt": "2015-02-20T03:12:46.349Z",
        "id": "54e6a62e61505403004698d9"
    },
    {
        "userID": "54e6b0236430c203000ecb86",
        "title": "Just a Yahoo looking for a lawn mower",
        "description": "need it now",
        "email": "email@yahoo.com",
        "createdAt": "2015-02-20T03:55:37.705Z",
        "updatedAt": "2015-02-20T03:55:37.705Z",
        "id": "54e6b0396430c203000ecb87"
    },
    {
        "createdAt": "2015-03-03T05:03:39.176Z",
        "updatedAt": "2015-03-03T05:03:39.176Z",
        "id": "54f540abdeddf07904a95cab"
    },
    {
        "createdAt": "2015-03-03T05:04:11.428Z",
        "updatedAt": "2015-03-03T05:04:11.428Z",
        "id": "54f540cbdeddf07904a95cac"
    },
    {
        "userID": "54e6a5d261505403004698d7",
        "title": "",
        "description": "",
        "email": "email@yahoo.com",
        "createdAt": "2015-03-03T16:08:06.843Z",
        "updatedAt": "2015-03-03T16:08:06.843Z",
        "id": "54f5dc660676aa030096bf30"
    },
    {
        "userID": "54e6a5d261505403004698d7",
        "title": "My title",
        "description": "Descrip",
        "email": "email@gmail.com",
        "createdAt": "2015-03-03T16:08:21.464Z",
        "updatedAt": "2015-03-03T16:08:21.465Z",
        "id": "54f5dc750676aa030096bf31"
    }
]

1 个答案:

答案 0 :(得分:0)

在你的main.js中你定义了“app / views / Listings”,但根据你的文件名,它应该是“app / views / ListingsCollectionView”。