Question

我正在尝试在select2周围创建一个包装器，它可以接受一个url或一个包含数据的数组。如果我将数据传递给包装器，那么我想在输入每个字母后禁用ajax请求。

如果传递数据然后禁用ajax请求，则如何配置此行为（无需复制代码并具有if）

基本上是以下代码

  SelectTwo.init = (el, text, url, data = []) ->
    @_url = url
    @_data = data

    el.select2
      placeholder: text
      minimumInputLength: 2
      data: @_data
      ajax:
        url: (term) =>
          @_url + '/' + term
        dataType: "json"
        results: (data, page) ->
          results: data

Answer 1

el.select2的参数是选项的对象，它不一定是对象文字，只是一个对象。这意味着您可以根据init的参数逐个构建对象。

你可以这样做：

SelectTwo.init = (el, text, data_source = { }) ->
  select_opts =
    placeholder: text
    minimumInputLength: 2

  if(data_source.url)
    select_opts.ajax =
      url: (term) -> "#{data_source.url}/#{encodeURIComponent(term)}"
      dataType: "json"
      results: (data, page) ->
        results: data
  else if(data_source.data)
    select_opts.data = data_source.data
  else
    # handle this however you want

  el.select2 select_opts

有些兴趣点：

我在搜索字词周围添加了encodeURIComponent包装，因为我是偏执狂，这是一个好习惯。
我切换到字符串插值来构建搜索网址，因为这比一堆+和引号更清晰。
不再需要将AJAX url函数与=>绑定。
根本不需要任何实例变量（当然除非其他地方有变化）。
我将参数切换为init以在对象中提供URL或数据数组，以便您可以说：
```
SelectTwo.init(el, 'pancakes', url: '...')
SelectTwo.init(el, 'pancakes', data: [ ... ])
```
而不是（IMO）更麻烦：
```
SelectTwo.init(el, 'pancakes', '...')
SelectTwo.init(el, 'pancakes', undefined, [ ... ])
```
我发现位置参数变得丑陋，如果有多个，当有可选参数抑制早期的非可选参数时，加倍。

试图创建一个select2包装器

1 个答案: