在将数据呈现为类型化建议之前，使用｛｛value｝｝上的函数

Using functions on {{value}} before rendering datum as typeahead suggestions

本文关键字：使用 函数 value 数据 类型化      更新时间：2023-09-26

我有一个基本模板：

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

谢谢。

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

例如，您可以用适配器（符合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，例如

相关文章：