javascript - 如何将自定义回调添加到 jquery 插件

Question

我想给 Select2 插件添加一个自定义函数(但我没有必要的知识)，比如

$('.select2').select2({
    optionDrawCallback : function(li_element){
        return li_element.className += 'bg-'+li_element.text;
    }
});

然后我转到源代码 ( select2.full.js ) 并找到了每个选项元素的创建位置，即此处:

Results.prototype.option = function (data) {...}

但现在我找不到如何触发我的功能。我能够通过 dataAdapter 触发它，它应该是选择本身，但这不是我需要的。

如有任何建议，我们将不胜感激。

Answer 1

更新后的答案:

您应该考虑避免进入第 3 方库的代码并更改它，因为您的更改将在未来的版本中被覆盖(假设您获得了它们)，并且您必须再次弄清楚把它放在哪里。

每个第 3 方插件/库都有自己的工作方式和应该使用的 API。在文档中查找您需要的内容。如果您遗漏了什么，也许是有原因的，或者您可以要求开发人员添加它，或者您甚至可以自己添加并创建拉取请求。

没有为所有库传递回调的“神奇解决方案”，因为它们都做不同的事情，每个都应该以不同的方式处理。

你能说在事情开始发生之前、可能发生之后、可能两者甚至在图书馆行动期间你总是需要回调吗？

如您所见，这实际上取决于您选择的库做什么以及它是如何做的。如果文档中有回调选项 - 它可能会以一种有意义的方式实现，采用我上面提到的一种或多种可能的方式。

---

至于您使用 select2 插件的具体情况:

查看 Templating文档中的选项。

这是一个如何实现您的要求的示例。

var data = [{
  id: 0,
  text: 'gray'
}, {
  id: 1,
  text: 'green'
}, {
  id: 2,
  text: 'blue'
}, {
  id: 3,
  text: 'yellow'
}, {
  id: 4,
  text: 'red'
}];

function formatState(state) {
  var $state = $('<div class="bg-' + state.text + '" style="background-color: ' + state.text + ';" > ' + state.text + '</div>')
  return $state;
};

$('.select2').select2({
  data: data,
  templateResult: formatState
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<select class="select2">
</select>

如果您愿意，它在 JsFiddle 中:https://jsfiddle.net/yq70y8cy/1/

旧答案:

您应该考虑避免进入第 3 方库的代码并更改它，因为您的更改将在未来的版本中被覆盖(假设您获得了它们)，并且您必须再次弄清楚把它放在哪里。

相反，尝试通过使用常规的 jQuery/javascript 代码保持简单，例如:

$('.select2 li').each(function(index){
   var $this = $(this);
   $this.addClass('bg-' + $this.text());
})