Question

我已经搜索了高分和低分的答案，解释了为什么app没有从我的JSON文件中呈现我的列表集合但是我无法弄明白...

所以我要做的就是从我的JSON文件中呈现一个列表 - 非常简单，但它只是不起作用..

非常感谢任何帮助。我已发布我的代码并在JS bin上添加了一个版本。

通过控制台运行代码，我可以在DOM中看到json数据，但我看不到任何数据。

谢谢！

App.js：

    // MODELS
    var EventModel = Backbone.Model.extend({
        initialize: function() {
            this.on('change', function() {
                eventView.render();
            });
        },
        defaults: {
            "name": "No title entered",
            "description": "No description entered",
            "startdate": "No start date"
        }
    });
    var eventModel = new EventModel();

    // COLLECTIONS
    var EventCollection = Backbone.Collection.extend({
        model: EventModel,
        url: 'data/getEvents.json',
        initialize: function() {
            this.on('reset', function() {
                eventListView.render();
            }),
            console.log('running init function for EventCollection');
            this.fetch({async: false});
            console.log(this.toJSON()); //This will log the loaded collection
        },
        parse: function(data) {
            console.log('running parse');
            return _.map(data, _.identity);
        },
        reset: function(models, options) {
            if (options && options.parse) {
                delete options.parse;
                models = this.parse(models);
            }
            return Backbone.Collection.prototype.reset.call(this, models, options);
        }
    });
    var eventCollection = new EventCollection();


    // VIEWS
    var EventView = Backbone.View.extend({
        tagName: 'li',
        className: 'single-model',
        render: function() {
            var el = this.el;
            $(el).html(Mustache.render($('#stream_getEvents').text()));
            return this;
        }
    });

    var EventListView = Backbone.View.extend({
        el: $('#list'),
        tagName: 'ul',
        id: 'list-view',
        initalize: function() {
            this.collection.on('add', this.addOne, this);
            this.collection.on('reset', this.addAll, this);
        },
        render: function() {
            this.addAll();
        },
        addOne: function(eventModel) {
            var eventView = new EventView({model: eventModel});
            this.$el.append(eventView.render().el);
        },
        addAll: function() {
            this.collection.forEach(this.addOne, this);
        }
    });


    // rendering
    var eventView = new EventView({model: eventModel});
    var eventListView = new EventListView({collection: eventCollection});


    function event(){
        eventView.render();
        eventListView.render();
        $('#list').html(eventListView.$el.html());
        console.log('clicked button');
    }

    $('.button-getEvents').click(event);

Answer 1

我认为你在胡子模板渲染中缺少模型。

$(el).html(Mustache.render($('#stream_getEvents').text(), this.model));

从JSON文件渲染骨干集合并不完全正常

1 个答案: