Как фильтровать базовую коллекцию для отображения тегов

Question

Я создаю инструмент закладок, который позволяет вам создавать список сохраненных закладок из формы на странице. Список будет содержать тег идентификатора (например, Amazon www.amazone.com tag: shopping). Из этого созданного списка я хочу также иметь список, показывающий различные теги, которые были названы.

Это, вероятно, должно использовать метод фильтра, но я не могу заставить его фильтровать правильный список; Я продолжаю получать каждый тег, указанный для каждого созданного 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, 
} 

маршрутизатор файл выглядит расслоение плотной, как это:

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(); 
})