Question

我正在使用jQuery dataTables来显示表格。我需要能够将行选择事件传递给处理选择的Aura组件，并对该行的数据执行一些操作。

在initialize()函数中：

initialize: function()
{
    $("#mytable tbody").click(function(event)
    {
      $(mytable.fnSettings().aoData).each(function ()
      {
        $(this.nTr).removeClass('row_selected');
      });

      $(event.target.parentNode).addClass('row_selected');
    });

    mytable = $('#mytable').dataTable();
},

我为行选择设置了click处理程序，但是如何获得对封闭组件的引用，以便sandbox.emit()能够发出消息？我可以将组件的引用放入Closure中，但这实际上使得该组件成为单例，并且我不能同时在页面上有两个组件实例。

是否有一种标准方法，使用jQuery选择器或其他方法，我可以从click()处理程序中检索对封闭组件的引用？

编辑：在我拥有32盎司咖啡因之前，我绝不应该尝试编写代码。您可以通过click()方法本身传递对当前组件的引用。像这样：

$("#mytable tbody").click(this, function(event)
{
  $(mytable.fnSettings().aoData).each(function ()
  {
    $(this.nTr).removeClass('row_selected');
  });

  $(event.target.parentNode).addClass('row_selected');

  event.data.sandbox.emit('mychannel', {data: 'stuff'});
});

Answer 1

如果我理解你的问题，你可以试试这样的事情

initialize: function () {
   var that = this;
   $("#mytable tbody").click(function(event) {
      //have acces to component as 'that'    
   });
}

我用于事件的是组件配置中的视图：

View: {
        events: {
            'click a[data-question-edit-id]': function (e) {
                var button = $(e.currentTarget),
                    id = button.attr('data-question-edit-id'),
                    examId = this.component.examModel.get('id');

                this.sandbox.router.navigate('/exams/' + examId + '/questions/' + id + '/edit', {trigger: true});
            },
            'click a[data-question-delete-id]': function (e) {
                var button = $(e.currentTarget),
                    id = button.attr('data-question-delete-id');

                this.component.showDeleteConfirmation(id);
            }
        }
    }

如果你发现有帮助，这是我正在努力的光环项目回购： https://github.com/lyubomyr-rudko/aura-test-project

在AuraJS中获取组件参考

1 个答案: