Question

我正在编写一个小应用程序来调用json请求，该请求包含有关为音乐播放器播放的曲目的数据。跟踪json请求的每2-3分钟更改一次。我试图获得主干只发射并添加另一个模型到我的集合，如果前面的条目调用不同。这是我到目前为止的代码，但它不断渲染相同的数据

// 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}。只有当模型更改正在获取时，我才能获得要呈现的数据？

Answer 1

这样的事情应该有效

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');
});

只有在获取数据不同时，Backbonejs才会添加到集合中

1 个答案: