jquery - TypeError: $.Dialog is not a function -
i trying perform search functionality in twitter-based backbone.js app. when click search button , error appear in web console of browser :"typeerror: $.dialog not function" , not know reason. note:everything during fetching operation of results twitter api ok problem in displaying of results in dialog , problem appears when build app requirejs..without requirejs problem not appear. here code(the code beginning backbone.js book):
search model:
define(['backbone'], function(backbone) { var com = com || {}; com.apress = com.apress || {}; com.apress.model = com.apress.model || {}; com.apress.model.search = backbone.model.extend({ url : 'http://localhost:8080/search', sync: function(method, model, options){ if(this.get('query')){ this.url = this.url + '/' + this.get('query'); } backbone.sync.call(this, method, model, options); }, parse: function(model){ return model; } }); return com.apress.model.search; });
search view:
define(['jquery', 'backbone'], function($, backbone) { var com = com || {}; com.apress = com.apress || {}; com.apress.view = com.apress.view || {}; com.apress.view.searchview = backbone.view.extend({ el: '#search', model: null, events: { 'click #searchbutton': 'runsearch' }, initialize: function(options){ var self = this; self.model = options.model; }, runsearch: function(e){ var self = this; query = $('#searchbox').val(); e.preventdefault(); console.log('run search against ' + query); //force reset self.model.set('query','', {silent: true}); self.model.set('query', query); } }); return com.apress.view.searchview; });
results view:
define(['jquery', 'backbone', 'handlebars'], function($, backbone, handlebars) { var com = com || {}; com.apress = com.apress || {}; com.apress.view = com.apress.view || {}; com.apress.view.resultsview = backbone.view.extend({ el: '#results', model: null, template: handlebars.compile($("#timeline-template").html()), initialize: function(options){ var self = this; self.model = options.model; self.model.fetch({ error: function(e){ self.model.trigger("app:error", {message: 'error retrieving timeline information'}); }, success: function(e){ self.model.trigger("app:success", {message: 'success retrieving timeline information'}); } }); self.listento(self.model,'change', self.render); self.render(); }, render: function(){ console.log('display now'); var self = this, output = self.template({tweet: self.model.get('statuses')}); console.log(output); $.dialog({ 'title' : 'search results', 'content' : output, 'draggable' : true, 'overlay' : true, 'closebutton' : true, 'buttonsalign': 'center', 'keepopened' : true, 'position' : { 'zone' : 'left' }, 'buttons' : { 'ok' : { 'action': function(){} } } }); } }); return com.apress.view.resultsview; });
app router:
define(['backbone', 'app/view/resultsview'], function(backbone, resultsview) { var com = com || {}; com.apress = com.apress || {}; com.apress.router = com.apress.router || {}; com.apress.router.approuter = backbone.router.extend({ searchmodel : null, routes: {'search/:query' : 'search'}, initialize: function(options){ var self = this; self.searchmodel = options.searchmodel; self.listento(self.searchmodel, 'change:query', self.navigatetosearch) self.searchmodel.on('app:error', function(error){ alert(error.message); }); }, navigatetosearch: function(model, options){ //manually navigate search url this.navigate("search/" + model.get('query'), {trigger: true}); }, search: function(query){ var self = this; console.log('search ' + query); if(self.searchmodel.get('query') !== query){ self.searchmodel.set('query', query, {silent:true}); } //now go view self.searchmodel.fetch( { success: function(model){ //create results view var resultsview = new resultsview({model:model}); }, error: function(e){ alert('no results available'); } }); //var resultsview = new com.apress.view.searchresults({model:searchmodel}); } }); return com.apress.router.approuter; });
main.js(for requirejs):
require.config({ shim: { underscore: { exports: '_' }, backbone: { deps: [ 'underscore', 'jquery' ], exports: 'backbone' }, handlebars: { exports: 'handlebars' }, moment: { exports: 'moment' }, dialog: { exports: 'dialog' }, }, paths: { jquery: './vendor/jquery-1.10.2', backbone: './vendor/backbone', underscore: './vendor/underscore', handlebars: './vendor/handlebars', moment: './vendor/moment', dialog: './vendor/dialog', } }); require([ 'backbone', 'app/view/timelineview', 'app/view/profileview', 'app/model/search', 'app/view/searchview', 'app/router/approuter', 'app/util/helpers', ], function (backbone, timelineview, profileview, search, searchview, approuter) { var timelineview = new timelineview(), profileview = new profileview({user: 'evahrikes'}), searchmodel = new search(), searchview = new searchview({model: searchmodel}), approuter = new approuter({searchmodel: searchmodel}); backbone.history.start(); console.log('all ok'); });
can me ,please???
Comments
Post a Comment