Question

我正在创建一个书签工具，可让您从页内形式创建存储书签列表。该列表将包括标识符标签（例如 - 亚马逊www.amazone.com标签：购物）。从这个创建的列表中，我想要一个列表，显示已命名的各种标记。

这可能应该使用过滤方法，但我似乎无法过滤正确的列表;我不断为每个创建的URL列出每个标记，因此有多个相同标记的示例。

以下是在创建表单，生成的URL列表和模块导出时正确使用的代码。这来自我的Views 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();
})

如何过滤主干集合以显示标签

1 个答案: