使用 Twitter Typeahead.js 访问元素的数据属性

Question

我使用 Rails 生成表单。我想使用 Twitter Typeahead 自动完成具有模型关联的字段。

以下 CoffeeScript 代码：

console.log $('.typeahead').data('source')

工作并返回：

["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

我可以从预先输入功能中访问相同的数据吗？以下代码：

$('.typeahead').typeahead(
    name: 'test'
    local: $(this).data('source')
    console.log $(this).data('source'))

不起作用并返回undefined。

Answer 1

最简单的方法是保存对 jQuery 对象的引用并使用它来代替 this：

$input = $ '.typeahead'
$input.typeahead
    name: 'test'
    local: $input.data 'source'

问题在于$(this).data('source') 在传递给.typeahead() 之前 被评估。此时，this 仍设置为全局范围，没有附加任何数据。

另一个选项，即使您有多个 .typeahead 元素也有效，它是手动调用 .each() 而不是依靠 .typeahead() 来迭代选定的元素本身：

$('.typeahead').each ->
    $(this).typeahead
        name: 'test'
        local: $(this).data 'source'

之所以有效，是因为传递给.each() 的函数“在当前DOM 元素的上下文中触发，因此关键字this 指代该元素”（参见docs）。