我想使用 Handlebars 插入嵌套元素,这些元素可以是 jQuery 元素,例如:
var ul = Handlebars.compile($('#ul').html());
var li = Handlebars.compile($('#li').html());
let el = $(li({slot: 'Hello World!'})).data('foo', Object([42]))
$('#main').append(ul({slot: el}))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
<div id="main" class="container">
</div>
<script id="ul" type="text/x-handlebars-template">
<ul>
{{{slot}}}
</ul>
</script>
<script id="li" type="text/x-handlebars-template">
<li>
{{slot}}
</li>
</script>
不幸的是,我正在为两个问题而苦苦挣扎:
- Handlebars 期望上下文中有 html 内容,因此我松开了
data-foo
。 - 使用
{{{slot}}}
可能不安全
还有什么选择?
最佳答案
要达到预期结果,请使用以下选项使用
- 使用 attr 而不是 data(),因为它只存储值,不会在 DOM 上设置属性
有关更多详细信息,请参阅此链接 - jQuery data attr not setting
- 拆分附加 ul 和 el
代码示例 - https://codepen.io/nagasai/pen/PvrLba?editors=1010
var ul = Handlebars.compile($('#ul').html());
var li = Handlebars.compile($('#li').html());
let el = $(li({slot: 'Hello World!'})).attr('data-foo', Object([42]))
$('#main').append(ul)
$('#main ul').append(el)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
<div id="main" class="container">
</div>
<script id="ul" type="text/x-handlebars-template">
<ul>
{{{slot}}}
</ul>
</script>
<script id="li" type="text/x-handlebars-template">
<li>
{{slot}}
</li>
</script>
关于javascript - 如何在 Handlebars 模板上下文中传递 JQuery 实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56494342/