Question

我正在尝试在基于twitter的backbone.js应用中执行搜索功能。但是当我单击搜索按钮时，浏览器的Web控制台中会出现错误：＆＃34; TypeError：$ .Dialog不是函数＆＃34;我不知道原因。注意：来自twitter api的结果提取操作期间的所有内容都可以，但问题在于在对话框中显示结果，只有当我使用requirejs构建应用程序时才会出现此问题。不需要出现此问题。这是代码（开始使用backbone.js书中的代码）：

搜索模型：

 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; 
 });

搜索视图：

  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 a reset
    self.model.set('query','', {silent: true});
    self.model.set('query', query);
  }
    });

    return com.apress.view.SearchView; 
  });

结果视图：

  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 to the search url
      this.navigate("search/" + model.get('query'), {trigger: true});
     }, 

    search: function(query){
        var self = this; 

    console.log('search for ' + query);
    if(self.searchModel.get('query') !== query){
        self.searchModel.set('query', query, {silent:true});
    }
    //now go the that view 
    self.searchModel.fetch(
        {
                success: function(model){
                //create the 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');
  });

任何人都可以帮助我吗？

TypeError：$ .Dialog不是函数

0 个答案: