Backbone - 如何从模型填充和显示集合项

时间:2015-10-31 15:06:17

标签: javascript backbone.js

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

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>

错误是&#34; Uncaught TypeError:watchlist.movi​​es.each不是函数&#34; 我不确定如何摆脱这个错误...

当我显示监视列表模型的对象时,我收到以下内容: 对象{name:&#34; Liste2&#34;,movies:Array [1],id:&#34; 563458d59f12f3030069949f&#34;} 让我相信电影收藏是一个阵列而不是一个集合。我对吗?我该如何解决这个问题?

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

你怎么看待这一切? 感谢

1 个答案:

答案 0 :(得分:1)

一些事情:

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

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

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

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

2)自动实例化的MovieModel对象不会调用他们的parse方法,因此您需要创建一个initialize方法来执行您的parse方法{1}}方法目前正在进行,例如

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

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

前2个修复也应该补救。

这里是JSFiddle