Question

我正在使用jquery-tmpl模板库来构建动态<select>列表。在我的模板中，我有一个函数调用，它返回页面上现有<option>元素的所有<select>元素。

在我的模板中，函数调用成功执行并从现有的.html()列表中返回<select>，但在DOM中将其呈现为文本，而不是将HTML附加到<select>列表。

我知道我的函数只返回一个字符串并且看起来被视为这样，但我不知道如何实际获得对模板中<select>元素的引用以执行任何jQuery功能

如何将<option>列表附加到模板HTML元素，或获取对模板元素的引用？

这是我的模板：

<script id="searchTemplate" type="text/x-jquery-tmpl">
    <select id="destinations" class="destinations">
        ${getDestinationList()}
    </select>
</script>

我的函数将<option>集合作为字符串返回：

function getDestinationList(){
    return $("#tabs-0 select[id$='destinations']").html(); //returns HTML list as string successfully
}

提前致谢!!

Answer 1

好的，对不起了所有人。花了几个小时试图解决这个问题，并在发布后几分钟找到了解决方案（面部拍击）。

我找到的解决方案是使用插件的编译模板功能。我之前使用$.template( "#destinationList", getDestinationList() );尝试过此操作，并在浏览器中收到脚本错误。事实证明我使用的是旧版本的插件，该功能实际上有签名$.templates(name, tmpl)。然后，我检查了我是否有最新版本，并看到签名已经更改为$.template(name, tmpl)，这与当前文档一致。不知道什么时候改变了，但是......

在搞清楚之后，我能够正确使用已编译的模板功能：

<script id="searchTemplate" type="text/x-jquery-tmpl">
   <select id="destinations" class="destinations">
      {{tmpl "#destinationList"}}
   </select>
</script>

在页面加载中定义编译模板如下：

$(function(){
    $.template( "#destinationList", getDestinationList() );
});

我的功能不变：

function getDestinationList(){
    return $("#tabs-0 select[id$='destinations']").html();
}

向所有关注此事的人致歉，但希望这会帮助其他人。

通过jquery-tmpl中的函数调用追加动态HTML元素

1 个答案: