タグを表示するためにバックボーンコレクションをフィルタする方法

Question

ブックマークツールを作成して、ページ内のフォームから保存されたブックマークのリストを作成できます。リストには識別子タグ（例えば、Amazonのwww.amazone.comタグ：ショッピング）が含まれます。この作成されたリストから、名前を付けられたさまざまなタグを示すリストも表示したいと思います。

これはおそらくフィルターメソッドを使用するはずですが、正しいリストをフィルターに掛けることができません。私は作成された各URLの各タグを取得し続けているので、同じタグの例が複数あります。

ここでは、フォーム、結果のURLリスト、およびモジュールのエクスポートを正しく作成するコードを示します。これは私の見解のjsファイルからさ：

var $ = require('jquery'); 
var Backbone = require('backbone'); 
var listTemplate = require('../../templates/addresslist.hbs'); 
var formTemplate = require('../../templates/addressform.hbs'); 
var detailTemplate = require('../../templates/addressdetail.hbs'); 

var AddressFormView = Backbone.View.extend({ 
    tagName: 'form', 
    template: formTemplate, 
    events: { 
    'submit': 'addAddress' 
    }, 
    render: function(){ 
    var renderedHtml = this.template(); 
    this.$el.html(renderedHtml); 
    return this; 
    }, 
    addAddress: function(event){ 
    event.preventDefault(); 
    this.collection.create({ 
     title: $('#title').val(), 
     url: $('#url').val(), 
     tag: $('#tag').val(), 
    }); 
    $('#title').val(''); 
    $('#url').val(''); 
    $('#tag').val(''); 
    }, 
}); 

var AddressListView = Backbone.View.extend({ 
    tagName: 'ul', 
    initialize: function(){ 
    this.listenTo(this.collection, 'add', this.renderItem); 
    }, 
    render: function(){ 
    return this; 
    }, 
    renderItem: function(address){ 
    console.log('address', address); 
    var addressItem = new AddressItemView({model: address}); 
    this.$el.append(addressItem.render().el); 
    } 
}); 

var AddressItemView = Backbone.View.extend({ 
    tagName: 'li', 
    template: listTemplate, 
    render: function(){ 
    var context = this.model.toJSON(); 
    this.$el.html(this.template(context)); 
    return this; 
    } 
}); 

var AddressDetailView = Backbone.View.extend({ 
    template: detailTemplate, 
    render: function(){ 
    this.$el.html('').append(this.template); 
    return this; 
    } 
}); 

module.exports = { 
    'AddressFormView': AddressFormView, 
    'AddressListView': AddressListView, 
    'AddressItemView': AddressItemView, 
    'AddressDetailView': AddressDetailView, 
} 

私のルータのjsファイルを次のようになります。

var $ = require('jquery'); 
var Backbone = require('backbone'); 
var views = require('./views/addressview'); 
var models = require('./models/address'); 

var Router = Backbone.Router.extend({ 
    routes: { 
    '': 'index', 
    'detail/:id/': 'detail' 
    }, 

    initialize: function(){ 
    this.collection = new models.AddressCollection(); 
    }, 

    index: function(){ 
    var addressForm = new views.AddressFormView({collection: this.collection}); 
    $('.app').html(addressForm.render().el); 

    var addressListing = new views.AddressListView({collection: this.collection}); 
    $('.app').append(addressListing.render().el); 

    this.collection.fetch(); 
    }, 

    detail: function(addressId){ 
    this.collection.fetch().done(function(){ 
     var address = this.collection.get(addressId); 
     var addressDetail = new views.AddressDetailView({model: address}); 
     $('.app').html(addressDetail.render().el); 
    }.bind(this)); 
    }, 
}); 

var router = new Router(); 

module.exports = router; 

Answer 1

は、複数のタグ選択

tagSelected :function(event){ 
    var tags = [<tag1>,<tag2>] //getting from multiple tag selection 
    var models = _.filter(this.collection.models,function(model){ 
    return tags.indexOf(model.get('tag')) >= 0; 
    }) 
    this.collection.reset(models); 
    this.render(); 
})