无法在 Backbone.js 视图中调用 jQuery-UI 函数答案

【问题标题】：Can't call jQuery-UI function in Backbone.js view无法在 Backbone.js 视图中调用 jQuery-UI 函数
【发布时间】：2012-06-24 06:50:37
【问题描述】：

我有一个网络应用程序，我使用 Backbone.js。

在登录视图中，我使用 jQuery UI 按钮。在模板代码中我调用$(".btn").button();没有问题。

但是当我想在用户点击按钮并调用后采取行动时：

$('#btnSubmit').button({
   disabled : true,
   label : "Logging in..."
});

我收到错误：“Uncaught TypeError: Object [object Object] has no method 'button'”（从 chrome devTools 控制台复制）。

奇怪的是，如果我在 chromeDevtools 控制台中运行这些代码行，它可以完美运行！我认为这与 DOM 以及我在偶数触发时所处的状态有关。 知道是什么问题吗？

一些细节：

Including the jQuery UI library:
define([
   'jQuery',
   'jQueryui',
/*...*/
], function($, jQueryui,...) {
var loginView = Backbone.View
   .extend({
/*...*/
   events : {
      "click #btnSubmit" : "login"
      },
/*...*/
   login : function() {
      $('#btnSubmit').button({
         disabled : true,
         label : "Logging in..."
         });
   },
}
});

   return new loginView;
});

编辑：

我尝试了斯蒂芬解决方案并尝试使用：

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

还是不行。我认为这意味着我无法访问所有 jQuery UI 功能。

【问题讨论】：

标签： javascript jquery-ui javascript-events backbone.js

【解决方案1】：

要尝试的一件事是像这样查找元素：

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

即使文档没有附加到 DOM，您也可以查找它。这是我唯一的猜测，因为我假设所有的 jquery 导出都设置正确。

【讨论】：

谢谢。 “jquery 导出设置正确”是什么意思？
嗯，看起来你正在使用 requirejs。 jQuery 不能“正常工作”（至少我上次检查时）使用 requirejs，需要做一些工作来确保 requirejs 在包含 jquery 时知道要返回什么。与 jquery ui 相同。所以，假设你已经完成了。
作为一个想法，在定义视图之前尝试“console.log($.browser)”。你应该得到一堆关于你的浏览器的信息。如果您在控制台中收到 undefined/null/empty 响应，您就知道 jquery 没有正确连接。
我认为问题不在于 jQuery，因为调用 $('.loading').show(); 是有效的。问题仅在于 jQueryUI
好吧，不幸的是，我也被难住了。我需要查看更多代码，jquery ui 的东西是如何连接的，你的 requirejs 配置是什么样的等等。我最后想到的是，在我使用 jquery ui 的项目中，我们有一个 'shim ' 在配置中指定：{shim: { 'lib/jquery-ui': {deps: ['jquery'] } }} 不确定这是否会有所帮助.. 但值得一试。

【解决方案2】：

我发现了错误：我应该使用这种方式传递给函数的 jQueryUI 引用：

jQueryui('#btnSubmit').button({
    disabled : true,
    label : "Logging in..."
});

【讨论】：