javascript - backbone database search firing 4 times -
i have search functionality in backbone application queries database via api, reason fires 4 times (or atleast returns results 4 times).
here code,
collections
app.collections.searchablecollection = backbone.collection.extend({},{ search: function(query, options) { var search = $.deferred(); options = options || {}; var collection = new this([], options); collection.url = _.result(collection, 'url'); var fetch = collection.fetch({ data: { q: query } }); fetch.done(_.bind(function(){ pops.events.trigger('search:done'); search.resolvewith(this, [collection]); }, this)); fetch.fail(function(){ pops.events.trigger('search:fail'); search.reject(); }); return search.promise(); } }); app.collections.projectsearch = app.collections.searchablecollection.extend({ url: pops.api_root + '/search/projects', });
views
app.views.globalresults = backbone.view.extend({ el : '.ui-grid-list--results', events: { "click .js-open-project" : "removesearchview" }, initialize: function() { this.addall(); }, render: function() { var noresult = new pops.views.noglobalresult; this.$el.before(noresult.render().el); return this; }, addall: function() { if(this.collection.length > 0) { this.collection.each(this.addone, this); } else { this.render(); } }, addone: function(model) { var resultitem = new pops.views.globalresult({ model:model }); this.$el.append( resultitem.render().el ); }, removesearchview: function(e) { settimeout(function(){ $('.ui-fullscreen').remove(); }, 1000); }
});
app.views.noglobalresult = backbone.view.extend({
classname: 'ui-message-block', template: _.template("<h5>no results found</h5><p>sorry, not find projects matched serach criteria.</p>"), initialize: function() { }, render: function() { this.$el.html( this.template() ); return this; }
});
app.views.globalresult = backbone.view.extend({
tagname : 'li', classname: 'ui-grid-list__item', template: _.template( $('#tpl-project-list-item').html() ), initialize: function() { }, render: function() { var self = this; var pjcreateddate = moment( this.model.get('created_at'), 'yyyy-mm-dd hh:mm:ss' ) ; var usercreateddate = moment( pops.session.get('created_at'), 'yyyy-mm-dd hh:mm:ss' ) ; var oneweekbeforeusercreateddate = usercreateddate.subtract(8, 'day') ; var givenewtag = pjcreateddate.isafter(oneweekbeforeusercreateddate) && (typeof this.model.get('projectview') != 'undefined' && this.model.get('projectview').length === 0); if(this.model.get('project_manager') instanceof backbone.collection === false){ this.model.set({'project_manager':new app.collections.users},{silent:true}); }if(this.model.get('collaborators') instanceof backbone.collection === false){ this.model.set({'collaborators':new app.collections.users},{silent:true}); }if(this.model.get('organisations') instanceof backbone.model === false){ var organisations = this.model.get('organisations'); this.model.set({'organisations':new pops.models.organisation(organisations)},{silent:true}); }if(this.model.get('user') instanceof backbone.model === false){ var users = this.model.get('user'); this.model.set({'user':new pops.models.user(users)},{silent:true}); }if(this.model.get('clients') instanceof backbone.model === false){ var clients = this.model.get('clients'); this.model.set({'clients':new pops.models.client(clients)},{silent:true}); } var projectmanagers = this.model.get('project_manager').tojson(); var collaborators = this.model.get('collaborators').tojson(); var collabs = projectmanagers.concat(collaborators); this.$el.html( this.template({ project: this.model.tojson(), newtag: givenewtag, collaborators: collabs })); this.model.get('project_manager').each(function(model, i){ if(i < 3) { var newuser = new pops.views.userinitials({ model:model }); self.$('.ui-inline-list').append(newuser.render().el); } }); this.model.get('collaborators').each(function(model, i){ if(i < 3) { var newuser = new pops.views.userinitials({ model:model }); self.$('.ui-inline-list').append(newuser.render().el); } }); var numpeople = this.model.get('collaborators').models.length + this.model.get('project_manager').models.length - 6; console.log(numpeople); if(numpeople > 0) { self.$('.ui-inline-list').append('<li class="ui-inline-list__item"> + ' + numpeople + ' more</li>'); } this.$el.attr('data-id', this.model.get('id')); this.$el.attr('data-organisationid', this.model.get('organisation_id')); if(this.model.get('archived_at') !== null) { this.$el.addclass('ui-list-block__item--archived'); this.$el.addclass('ui-list-block__item--archived-' + parseint(moment(this.model.get('archived_at'), 'yyyy-mm-dd hh:mm:ss').format('yyyy'), 10)); } if( this.model.get('visible') == false ) { this.$el.hide(); } if($('.ul-projects a[data-objectid="'+this.model.id+'"]').length < 1 ){ this.$el.addclass('ui-list-block__item--closed'); } return this; }
the search triggered in view,
app.views.globalsearch = backbone.view.extend({ el : 'body', template: _.template($('#tpl-global-search').html() ), events: { "click .js-close-fullscreen" : "removeview", "click .js-make-filter" : "setsearchfilter", "click .js-trigger-search" : "dosearch", "keyup input[name=search]" : "processkey" }, initialize: function() { }, render: function() { this.$el.append(this.template()); return this; }, removeview: function(e) { e.preventdefault(); this.$('.ui-fullscreen').remove(); }, setsearchfilter: function(e) { e.preventdefault(); var element = $(e.currenttarget); var selectedtext = element.text(); this.collectionname = element.data('collection'); this.isarchived = element.data('archived'); this.$('.dropdown-toggle').find('span:first').text(selectedtext); }, processkey: function(e) { if(e.which === 13){ this.$('.js-trigger-search').trigger("click"); } }, dosearch: function(e) { e.preventdefault(); var self = this; this.$('.global-search-container').removeclass('error').find('p').remove() if(this.collectionname == undefined) { this.collectionname = "projectsearch"; this.isarchived = "all"; } this.$('.js-trigger-search').find('i').removeclass('fa-search').addclass('fa-refresh spin') this.$('.ui-grid-list--results').empty(); this.$('.ui-message-block').remove(); var projects = app.collections[this.collectionname]; var findprojects = projects.search({ string: this.$('[name=search]').val(), archived: this.isarchived }); findprojects.done(function(projects){ //console.log(projects) var resultsview = new app.views.globalresults({ collection: projects }); //resultsview.render(); self.$('.js-trigger-search').find('i').removeclass('fa-refresh spin').addclass('fa-search') }); }
});
now have never used $.deferred or promise's before using them wrong, dont think case.
the search gets initialised with,
var searchresults = new app.views.globalresults;
Comments
Post a Comment