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などが使えるようになる。