How render model which I get as AJAX data

Question

Here are my code:

Model:

var app = app || {};
app.Film = Backbone.Model.extend({
defaults: {
    poster: 'http://placehold.it/320x150',
    title: 'No name',
    genre: 'Unknown',
    runtime: 'Unknown',
    imdbRating: 0
},
parse: function( response ) {
    response.id = response._id;
    return response;
}
});

Collection:

var app = app || {};
app.Films = Backbone.Collection.extend({
    model: app.Film,
    url: '/api/films'
});

Views: Model:

var app = app || {};
app.FilmView = Backbone.View.extend({
    tagName: 'div',
    className: 'filmContainer',
    events: {
    },
    initialize : function() { 
        this.template= _.template( $('#filmTemplate').html() );
    },
    render: function() {
        this.$el.html( this.template( this.model.toJSON() ));
        return this;
    }   
});

Collection:

ar app = app || {};
var global = 'global';
app.FilmsView = Backbone.View.extend({
    el: '#films',
    events:{
    },
    initialize: function() {
        this.collection = new app.Films();
        this.collection.fetch();
        this.render();
        this.listenTo( this.collection, 'add', this.renderFilm );
        this.listenTo( this.collection, 'reset', this.render );
        this.listenTo( Backbone.Events, 'findFilm', this.findFilm );
    },
    render: function() {
        this.collection.each(function( item ) {
            this.renderFilm( item );
        }, this );
        console.log('render');
    },
    renderFilm: function( item ) {
        var filmView = new app.FilmView({
            model: item
        })
        this.$el.append( filmView.render().el );
        console.log('renderFilm');
    },
    findFilm: function () { 
        console.log('findFilm');
        $.ajax({
            type: "POST",
            url: "/film/find",
            data: {
                name: "Gotham"
            },
            success: function(data){
                app.FilmsView.collection = new app.Films();
                app.FilmsView.collection.add (data[0]);
                console.log(app.FilmsView.collection)
            }
        });         
    }
});

Idea of my problem is - I must get string from field and use it for searching of the film in DB. "/film/find" request response me with object which include fields of the model. I need some way to display this model in page. As I use fetch() method when initialize: page display all DB models. So I need clear collection and display only 1 model which I get from the server. this.collecion.reset() don't work and don't trigger render() event.

Indetesting think: app.FilmsView.collection returnt "undefined" after rendering, so I need to create new collection for AJAX response.

Answer 1

Try to change this string in itnitialize():

this.listenTo( Backbone.Events, 'findFilm', this.findFilm );

to

this.listenTo( Backbone.Events, 'findFilm', this.findFilm, this );

And then in findFilm:

success: function(data){
  this.collection.reset();
  this.collection.add (data[0]);
}.bind(this);