Question

我有一个基本模板：

<p><a href="{{queryString}}{{valueModified}}">{{value}}</a></p>

我有一个函数，我希望在将它附加到查询字符串之前运行{{value}}：

valueModified = encodeURIComponent(value);

但我不知道如何在typeahead对象的初始化过程中执行此操作：

$(document).ready(function() {
    $('.genericSearchBox').typeahead({
        prefetch: 'genericItemList.json',
        limit: 10,
        template: // ???
     });
});

预编译模板是否能够完全处理这个问题？

如果是这样，在定义数据集时将一个传递给.typeahead（）的语法是什么？

我尝试了什么：

我的JavaScript体验有限，而且我对模板的体验也更加丰富（今天才知道它们是什么以及它们是如何工作的）。我在下午阅读了与模板相关的主题，但到目前为止我看到的大多数模板都定义了HTML标记结构和各种{{value}}占位符。

我尝试连接一些文字字符串和encodeURIComponent函数调用，但它刚刚打破了初始化：

template: '<p><a href=http://search.domain.edu/search?x=12&y=12&access=p&site=domain&output=xml_no_dtd&client=domain-v5&sort=date%253AD%253AL%253Ad1&proxystylesheet=domain-v5&oe=UTF-8&q=' + encodeURIComponent(value); + '>' + value + '</a></p>'

当我尝试它时，我认为不可能。根据我的理解，.typeahead（）的语法查找数据集 - 我只看到函数用作为变量赋值的一部分，而不是定义数据集。

我可以通过直接编辑typeahead.js并替换其默认的<p>{{value}}</p>模板来完成我想要的工作，但这不会让我觉得这是一个很好的长期解决方案。我希望有人可能有一个更合适的建议，不需要直接修改插件。

谢谢。

Answer 1

有几种方法可以解决这个问题。

例如，您可以使用适配器（符合Tyepahead期望模板引擎的界面）来封装您的模板引擎，以执行您想要的操作（这是一个2线程）。

另一种可能更直接的方法是处理结果，并使用valueModified填充数据，然后直接在模板中使用valueModified。类似的东西：

$(document).ready(function() {
    $('.genericSearchBox').typeahead({
        prefetch: 'genericItemList.json',
        limit: 10,
        template: '<p><a href="{{queryString}}{{valueModified}}">{{value}}</a></p>',
        filter: function(response) {
            // sanity tests go here here
            retval = []
            for (var i = 0; i < response.length; i++) {
                retval.push({ value: response[i], title: response[i], valueModified: encodeURIComponent(response[i]) });
            }
            return retval;
        }
    });
});

...当模板引擎运行时，它会在您的特定数据的上下文中运行，因此您可以访问valueModified，例如

在将数据呈现为预先输入建议之前，使用{{value}}上的函数

1 个答案: