0

我有一个基本模板：

<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>模板来完成我想要的，但这并不是一个好的长期解决方案。我希望有人可能有更合适的建议，不需要直接修改插件。

谢谢你。

4

1 回答 1

0

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

例如，您可以使用适配器（符合 Tyepahead 期望模板引擎的接口的东西）包装您的模板引擎来执行您想要的操作（它是一个 2-liner）。

另一种可能更直接的方法是处理结果，并用 填充您的数据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例如

于 2013-08-29T06:28:00.680 回答