Question

我无法弄清楚如何从服务器填充模型的属性，然后将填充的模型添加到集合中，并让视图呈现该集合。这是我的代码：

var movieDetails = new cinephile.Models.MovieDetailsModel({ id: movie.get('id') });
this.collection.add(movieDetails);

MovieDetailsModel内部：

cinephile.Models.MovieDetailsModel = Backbone.Model.extend({

    url: function()
    {
        return '/cinephile/api/index.php?action=getMovieDetails&movieId=' + this.id;
    },

    initialize: function()
    {
        this.fetch();
    }
});

this.collection只是一个模型设置为cinephile.Models.MovieDetailsModel

的集合

我正在侦听要添加到集合中的项目，当它们存在时，执行以下操作：

displayMovie: function(movie)
{
    var view = new cinephile.Views.MovieView({
        model: movie,
        className: 'movie clearfix',
        template: JST['app/scripts/templates/MovieView.ejs'],
    });

    this.$("#my-movies").append(view.el);
},

MovieView看起来像这样：

cinephile.Views.MovieView = Backbone.View.extend({

    initialize: function(options)
    {
        this.template = options.template;
        this.render();
    },

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

我遇到的问题是我正在使用的模板试图访问未定义的模型属性。我很确定它是未定义的，因为在将模型添加到集合并随后呈现给视图之前，MoveDetailsModel尚未完成提取。

我该如何解决这个问题？我希望能够创建一个带有id的MovieDetailsModel，使用该id从服务器获取电影细节，然后将填充的模型添加到集合中，然后将该集合渲染到屏幕上。

感谢任何帮助。

Answer 1

Backbone fetch返回一个jqXHR对象，这是一个Deferred objects Promise。调用fetch时，尚未填充属性。承诺对象有一个唐 ejqXHR函数，可以在请求完成后传递回调函数。

我建议将fetch移动到另一个方法而不是构造函数，因为那里你可以返回jqXHR对象并访问它的done函数。这是一个例子：

var movieDetails = new cinephile.Models.MovieDetailsModel({ id: movie.get('id') });
var promise = movieDetails.fetch();
promise.done(function() {
    var view = new cinephile.Views.MovieView({model: movieDetails});
    view.render();
});

获取后将模型添加到集合中

1 个答案: