Question

以下是我的代码：

型号：

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

收集：

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

查看：型号：

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

收集：

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

我的问题的想法是 - 我必须从字段中获取字符串并使用它来搜索数据库中的电影。＆＃34; /膜/找到＆＃34;请求响应我的对象，包括模型的字段。我需要一些方法在页面中显示这个模型。因为我在初始化时使用fetch（）方法：页面显示所有数据库模型。所以我需要清晰的收集并只显示我从服务器获得的1个模型。 this.collecion.reset（）不会工作，也不会触发render（）事件。

不确定思考：app.FilmsView.collection returnnt＆＃34; undefined＆＃34;渲染后，我需要为AJAX响应创建新的集合。

Answer 1

尝试在itnitialize（）中更改此字符串：

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

到

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

然后在findFilm中：

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

我如何渲染模型作为AJAX数据

1 个答案: