如何从手把模板中选择元素？答案

【问题标题】：How to select elements from a handelbars template?如何从手把模板中选择元素？
【发布时间】：2016-08-09 10:16:26
【问题描述】：

我们的网页中有一个 div：

<div id="person-details">
    <div></div>
    ...
</div>

我们使用以下 jQuery 代码从该 div 中选择相关元素：

var person = $("#person-details");
var children = release.find("div");
var fullname = children.first();

我们使用渲染函数执行 ajax 请求以获取我们存储在外部文件中的车把模板：

function _render() {
    var templateScript;
    template.getTemplate(filename).done(function(template) {
        templateScript = Handlebars.compile(template);
        fullname.html(templateScript(context));
    });
}

模板如下所示：

<div>
    <div>
        <p>{{name}}</p>
    </div>
    <div>
        <p>{{value}}</p>
    </div>
</div>

在调用渲染函数之后，我们想要从模板中选择任何元素。例如我们尝试过使用：

fullname.children('div');

但由于内容是动态生成的，我们无法从 DOM 中获取节点。

是否可以像这样从生成的车把模板中选择元素？

【问题讨论】：

有可能，请记住 javascript 将异步执行，因此您可能正在选择尚未呈现的 DOM 元素。
@DanielShillcock 感谢 Daniel，完全忽略了渲染的异步性质。
这里有一个可能有帮助的 sn-p。每个输入都打印到控制台。 codepen.io/IronAces/pen/NAEOWy?editors=101#anon-login

标签： javascript jquery templates dom handlebars.js

【解决方案1】：

感谢@DanielShillcock 强调render() 是异步的。这是一个解决方案：

function _render() {
    var templateScript;
    template.getTemplate(filename).done(function(template) {
        templateScript = Handlebars.compile(template);
        selector.html(templateScript(attribute));
        value = selector.find("div");
    });
}

【讨论】：