Collectionをwhereでフィルターかけたらeachとか使えなくなった
backbone.jsでCollectionをrenderでeachで表示している。
var candidates = new Candidates([ { name: "山田太郎", sex: "男", age: 24, status: 0 }, { name: "鈴木康子", sex: "女", age: 20, status: 0 }, { name: "坂巻徹", sex: "男", age: 26, status: 1 }, { name: "大迫道夫", sex: "男", age: 24, status: 0 }, { name: "宮沢洋介", sex: "男", age: 26, status: 0 }, { name: "上条志のぶ", sex: "女", age: 20, status: 1 }, { name: "三枝沙也加", sex: "女", age: 20, status: 0 }, { name: "酒井祥子", sex: "女", age: 23, status: 0 }, ]); var candidatesView = new CandidatesView({ collection: candidates }); $("#possible-candidates").html(candidatesView.render().el);
でrenderはこのように。
var CandidatesView = Backbone.View.extend({ tagName: "ul", render: function() { this.collection.each(function(candidate){ if( candidate.get("status") == 0 ){ var candidateView = new CandidateView({ model: candidate }); this.$el.append(candidateView.render().el); } }, this ); return this; } });
これはうまく表示される。
これをこのように、collectionであるcandidatesのなかから、status = 1のものだけのコレクションにしてからViewに渡したい。
var possibleCandidates = candidates.where({ status: 0}); var candidatesView = new CandidatesView({ collection: possibleCandidates });
しかしそうすると
Uncaught TypeError: Object [object Array] has no method 'each'
とエラーが。possibleCandidates.lengthとかでサイズを確認したら、きちんと検索はできている様子で数はあっている。
これはwhereで取得するオブジェクトがCollectionではなくてArrayになってしまっているのが問題。ではどうやってキャストするのかということで悩むところだが、単純に新しいCollectionのインスタンスを作ってしまえば回避できる。
var possibleCandidates = new Candidates( candidates.where({ status: 0}) );
CandidatesはCollectionをextendしたものなので、これでまたeachなどが使えるようになる。