백본 컬렉션을 필터링하여 태그를 표시하는 방법

Question

페이지 내 양식에서 저장된 책갈피 목록을 만들 수있는 북마크 도구를 만들고 있습니다. 목록에는 식별자 태그 (예 : 아마존 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(); 
})