0

我正在使用浏览器 localStorage 用 Backbone.JS 对概念进行原型设计。希望更好地了解其结构并构建模型、集合以及 REST 服务应包含的内容。我遇到困难的场景是在显示匹配的结果表之前过滤集合（基于表单文本框）。

从我的收藏：

 initialize: function(){
    this._meta = {};

    this.meta("sortOrder", "asc");
    this.meta("sortColumn", "trackNumber");

    //this.fetch();
    console.log("TrackCollection - Initialize: Collection has " +  this.length + " items");
    if(this.length == 0) { 
        console.log("Generating new items into collection");

        var trackItem1 = new TrackModel();
        this.add(trackItem1);
        this.add(trackItem1);
        this.add(trackItem1);
        this.add(trackItem1);
        this.add(trackItem1);

    }

}


searchLocalStorage: function(trackItems) { 
    console.log("TrackCollection - searchLocalStorage: Collection has " +  this.length + " items before filter");

    if (trackItems == "") { 
        console.log("No Search terms provided");
        return this;
    }

    var searchTerms = trackItems.split(', ');

    console.log("Search Terms: " + _.isArray(searchTerms) + " / " + searchTerms.length + " / " + JSON.stringify(searchTerms));

    var filteredCollection = [];

    _(this.filter(function(data) {
        if( _.contains(searchTerms, data.get("trackNumber")) ) {
            console.log('Matched ' + data.get("trackNumber"));
            console.log(data);
            filteredCollection += data;
        }
    }));

    console.log(filteredCollection);
    this.reset(filteredCollection); 

    console.log("TrackCollection - searchLocalStorage: Now Collection has " +  this.length + " items");

},

从我的搜索视图

 var TrackSearchView = Backbone.View.extend({
el: $("#page"),

events: {
    'click #buttonTrackSearch': 'searchSubmit'
},

render: function(){
  $('.menu li').removeClass('active');
  $('.menu li a[href="'+window.location.hash+'"]').parent().addClass('active');
  this.$el.html(trackSearchTemplate);

  // add the sidebar 
  var sidebarView = new SidebarView();
  sidebarView.render();
},

searchSubmit: function (ev) {
    ev.preventDefault();

    console.log("View - TrackSearchView - searchSubmit");

    var searchData = $("#search").val();

    //this.collection.meta("searchData", searchData);

    this.collection = this.collection.searchLocalStorage(searchData);

    Backbone.history.navigate('summary', true); 
},

从我的列表视图中：

 var TrackSummaryView = Backbone.View.extend({
el: $("#page"),

events: {
    'click #summaryTrackItems thead th a': 'sortItemsByColumn'
},

render: function(){
  $('.menu li').removeClass('active');
  $('.menu li a[href="'+window.location.hash+'"]').parent().addClass('active');

  this.$el.html(trackSummaryTemplate);

  console.log("trackSummaryView - Collection has " + this.collection.length + " entries");
  this.collection.forEach(this.setupSummaryTableRow, this);

},

setupSummaryTableRow: function(trackItem) {
    var trackSummaryRowView = new TrackSummaryRowView({ model: trackItem, collection: this.collection});

    $(this.el).find("#summaryTrackItems").append(trackSummaryRowView.render().$el);
    return this;
},

从我的路由器：

 var initialize = function(){

var app_router = new AppRouter;

var trackCollection = new TrackCollection();

app_router.on('route:trackSearch', function(){

    var trackSearchView = new TrackSearchView({ collection: trackCollection });
    trackSearchView.render();

});


app_router.on('route:trackSummary', function(){

    var trackSummaryView = new TrackSummaryView({ collection: trackCollection});
    trackSummaryView.render();

});

Backbone.history.start();
 };
4

0 回答 0