Backbone - 如何填充和显示模型中的集合项目

Question

我有一个模型和一个监视列表集合

var Watchlist = Backbone.Model.extend({
    'urlRoot': 'http://myurl/watchlists',

    'defaults': {
        id: null,
    },

    'initialize': function() {
        this.set('movies', new MoviesCollection());
    },

    'parse': function( apiResponse ){
        console.log("parsing wlist model");
        console.log(apiResponse);
        return apiResponse;
    }
});

var Watchlists = Backbone.Collection.extend({
    'url': 'http://umovie.herokuapp.com/unsecure/watchlists',
    'model': Watchlist,

    'parse': function( apiResponse ){
        console.log("parsing wlist collection");
        console.log(apiResponse);
        return apiResponse;
    }
});

还有一个模型和电影集合：

var MovieModel = Backbone.Model.extend({
    urlRoot: "http://umovie.herokuapp.com/movies",
    defaults: {
        trackId: "",
        nameId: ""
    },
    parse: function(response){
        console.log("parsing moviemodel");
        this.trackId=response.trackId;
        return response;
    }
});

var MoviesCollection = Backbone.Collection.extend({
    model:MovieModel
});

如您所见，Watchlist 模型包含一系列电影。 当监视列表模型更新时，如何填充电影集合？它会自动填充吗？

另外，我正在执行以下操作以显示特定观看列表的电影，但它没有按预期工作......

<script type="text/template" id="watchlist-edit-template">
<h4><%= watchlist ?  'Edit' : 'Create new' %> Watchlist</h4>
<h5><%= watchlist ? '':'Enter watchlist name:' %></h5>
<textarea id="watchlistName" cols="50" rows="1"><%= watchlist?    watchlist.name : '' %></textarea>
<hr>
<div id="hiddenWatchlistId" style="display:none;"><%= watchlist ? watchlist.id : 0 %></div>
<div class="list-group">
    <% watchlist.movies.each( function( list ){ %>
    <a href="#" class="list-group-item"><%= list.get("trackName") %></a>
    <% }); %>
</div>
</script>

错误是“Uncaught TypeError: watchlist.movi​​es.each is not a function” 我不知道如何摆脱这个错误......

当我显示监视列表模型的对象时，我收到以下信息： 对象{名称：“Liste2”，电影：数组 [1]，id：“563458d59f12f3030069949f”} 这让我相信电影集合是一个数组而不是一个集合。我对吗？我应该如何解决这个问题？

我想我没有正确填充电影收藏。

你怎么看这一切？ 谢谢

Answer 1

一些事情：

1) 您可以在 Backbone 集合的构造函数调用中传递对象数组。该集合将被创建并自动填充该集合的 model 的实例--为您传入的数组中的每个对象一个。因此，在您的 Watchlist 模型的 initialize() 函数中，更改行

this.set('movies', new MoviesCollection());

到

this.set('movies', new MoviesCollection(this.get('movies')));

MoviesCollection 将采用该数组并使用 MovieModel 的实例填充自身。

2) 自动实例化的 MovieModel 对象不会调用它们的 parse 方法，因此您需要创建一个 initialize 方法来执行您的 parse 方法当前正在执行的操作，例如

initialize: function(data) {
    this.trackId = data.trackId;
},

3) 错误，Uncaught TypeError: watchlist.movies.each is not a function 被抛出，因为 watchlist.movies 不是一个集合，正如你所怀疑的，而是一个普通数组，因此没有一个名为 each 的函数。

前 2 个修复程序也应该可以解决这个问题。

这是JSFiddle。