0

我正在编写一个小应用程序，它调用一个 json 请求，其中包含有关正在为音乐播放器播放的曲目的数据。每 2-3 分钟跟踪 json 请求更改。如果先前调用的条目不同，我试图让骨干只触发并将另一个模型添加到我的集合中。到目前为止，这是我的代码，但是它一直呈现相同的数据

// Model: Track
//
//  
window.Track = Backbone.Model.extend({});   


// Collection: Tracks
//
//  
window.Tracks = Backbone.Collection.extend({ 
    model: Track,
    url: "api/nowplaying/1.json",
    parse: function (response) {
        return response.response.body;
    }
});


// View: MetaDataView 
//
//  
window.MetaDataView = Backbone.View.extend({
    template: "#metadata-template",
    tagName: 'li',
    className: 'metadata',

    initialize: function() {
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
        this.initializeTemplate();
    },

    initializeTemplate: function() {
        this.template = _.template($(this.template).html());
    },

    render: function() { 
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});


// View: MetaDataLibraryView
//
//
window.MetaDataLibraryView = Backbone.View.extend({
    tagName: 'section', 
    className: 'metadata-library', 

    initialize: function() {
        _.bindAll(this, 'render', 'startup', 'renderNew');
        this.template = _.template($('#metadata-library-template').html());
        //this.collection.bind('reset', this.render);
        this.collection.on('add', this.renderNew, this);
        this.startup();
    },
    startup: function() {
        var e = this;
        window.setInterval(function () {
            console.log('fetching');
            e.collection.fetch({update: true, remove:false, add: true});
        }, 2000); 
    },
    renderNew: function(newModel) {
        var collection = this.collection;
        $metadata = this.$(".metadata-library");
        var view = new MetaDataView({ model: newModel, collection: collection });
        $metadata.append(view.render().el);
        return this;

    },
    render: function() {
        var $metadata,
            collection = this.collection;

        $(this.el).html(this.template({}));
        $metadata = this.$(".metadata-library");
        this.collection.each(function(schedule) {
            var view = new MetaDataView({ model: schedule, 
                                           collection: collection });
            $metadata.append(view.render().el);
        });

        return this;
    }
});

我在 stackoverflow 上发现了有关使用 {update: true, remove:false, add: true} 之类的集合获取选项的可能性的帖子。仅当正在获取的模型发生更改时，我将如何获取要呈现的数据？

4

1 回答 1

0

像这样的东西应该工作

startup: function() {
    window.setInterval(function () {
        console.log('fetching');
        var track = new Track();
        track.fetch()
        .done(function() {
            if(!this.isSamePrevTrack(track)) {
                e.collection.add(track);
            }
        }.bind(this));
    }.bind(this), 2000); 
},

isSamePrevTrack: function(track) {
    if(!this.prevTrack) {
      this.prevTrack = track;
      return false;
     }
    // Do some test to see if the track is the same
    // ie. return this.prevTrack.get('id') === track.get('id');
});
于 2013-10-05T20:52:50.553 回答