如何重构 js typeahead 实例化

Question

我有以下代码块实例化 typeahead

$("#searchbox").typeahead({
    minLength: 3,
  }, {
    name: "Type0",
    displayKey: "name",
    source: bloodHound[0].ttAdapter(),
    templates: {
      header: "<h4 class='typeahead-header'><img src='Type0.png'>Type0</h4>",
      suggestion: Handlebars.compile(["{{name}}<br><small>{{address}}        </small>"].join(""))
    }
  }, {
    name: "Type1",
    displayKey: "name",
    source: bloodHound[1].ttAdapter(),
    templates: {
      header: "<h4 class='typeahead-header'><img src='Type1.png'>Type1</h4>",
      suggestion: Handlebars.compile(["{{name}}<br><small>{{address}}</small>"].join(""))
    }
  }
)

如果我想添加其他类型，例如Type2 我必须复制并粘贴块，因此效率不高。我在一个名为 types 的数组中有可用的类型。

我怎么会有一个代码块来循环数组并创建与上面相同的结果。所有建议表示赞赏。

Answer 1

我不知道你的 types 数组应该是什么样子，但我会这样设置它：

var types = [
  {
    name: 'Type0',
    displayKey: 'Type 0'
  },
  {
    name: 'Type1',
    displayKey: 'Type 1'
  }
]


var args = types.map(function (type, i) {
  return {
    name: type.name,
    displayKey: type.displayKey,
    source: bloodHound[i].ttAdapter(),
    templates: {
      header: '<h4 class="typeahead-header"><img src="' + type.name + '.png">' + type.name + '</h4>',
      suggestion: Handlebars.compile(["{{name}}<br><small>{{address}}        </small>"].join(""))
    }
  }
})

args.unshift({ minLength: 3 })

// Calls typeahead with a variable number of arguments on the search box
$.fn.typeahead.apply($("#searchbox"), args)

如何重构 js typeahead 实例化

How to refactor js typeahead instantiation

javascript

jquery

refactoring

twitter-bootstrap

typeahead.js