使用 RequireJS 处理 "this" 和 JQuery onclick 事件

Question

我正在更新应用程序以使用 RequireJS 并将 functions/variables 移出全局上下文。我不确定在使用 JQuery 单击处理程序时如何构建事物，以便我的函数可以访问触发单击的 HTML 对象上的 data-* 属性并可以访问其中的属性我的模块。

下面是我整理的一个简单测试用例，用于演示我正在尝试做的事情。我想要一个在 div 的点击事件上调用的函数，它能够访问触发它的 div 上的 data-value 属性和 packageVar 属性在我使用 RequireJS 加载的模块中。

这是我的 index.html:

<!DOCTYPE html>
<head>
  <title>Test.Next</title>
</head>
  <body>
    <script data-main="js/test-require" src="js/require.js"></script>
    <div id="test-no-bind" data-value="value">Test No Bind</div>
    <div id="test-bind" data-value="value">Test Bind</div>
  </body>
</html>

这里是 test-require.js:

requirejs.config({
  "baseUrl": 'js',
  "paths": {
    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min",
    "domReady": 'vendor/domReady'
  }
});
requirejs(['maintest','domReady!'], function(main) {
  main.initialize();
});

最后是我的 maintest.js:

define(['jquery','domReady!'], function($) {
  return {
    'packageVar' : 'test',
    buttonClick : function() {
      console.log($(this).attr("data-value"));
      console.log(this.packageVar);
    },
    initialize: function() {
      $("#test-no-bind").click(this.buttonClick);
      $("#test-bind").click(this.buttonClick.bind(this));
    }
  };
});

test-no-bind div 结果：

value
undefined

test-bind div 结果：

undefined
test

Answer 1

您正在尝试使用相同的上下文从两个不同的对象访问属性 this。因此，在无绑定情况下，您会正确获得 data-value 属性的 div 元素值，因为在 jquery click 函数中 this 上下文是元素事件产生的地方，但是你得到另一个对象属性并且未定义，因为该元素没有 packageVar 属性。对于使用 bind 函数的绑定情况，您将对象作为 this 上下文传递，因此您有 packageVar 的值，但没有元素属性的值。

尝试使用正确的上下文调用 buttonClick 并将元素上下文传递给函数，以便从他的源中正确获取每个值：

define(['jquery','domReady!'], function($) {
  return {
    'packageVar' : 'test',
    buttonClick : function(element) {
      console.log($(element).attr("data-value"));
      console.log(this.packageVar);
    },
    initialize: function() {
      var that = this;
      $("#test-no-bind").click(function() {
        that.buttonClick(this);
      });
      $("#test-bind").click(function(){
        that.buttonClick(this);
      });
    }
  };
});

试试这个 JSFIDDLE

希望这对您有所帮助，

使用 RequireJS 处理 "this" 和 JQuery onclick 事件

Handling "this" with RequireJS and JQuery onclick events

javascript

jquery

requirejs