Javascript 访问DOM中元素的把手模板

我使用这段代码在我的应用程序中呈现一个模板-

var venuePage =
    '<div>' +
        '<div id="venuePage">' +
            '<div class="header"><a href="#" class="btn">Back</a><h1>{{title}}</h1></div>' +
            '<div class="scroller">' +
                '<div class="map">' +
                    '<span>{{venue_address1}}, {{venue_town}}, {{venue_postcode}}</span>' +
                '</div>'
            '</div>' +
        '</div>' +
    '</div>';

template = Handlebars.compile(venuePage);
$(".map").text("new text");

var-venuePage=
'' +
'' +
“{{title}}”+
'' +
'' +
“{场馆地址1}，{场馆城镇}，{场馆邮政编码}”+
''
'' +
'' +
'';
模板=把手。编译（venuePage）；
$（“.map”）.text（“新文本”）；

在此之后，我想使用

jQuery

操作

.map

，这在jQuery代码运行时不起作用，

.map

元素当前不在DOM中

对于我来说，实现我所需要的最好的方式是什么

---

谢谢你可以试试这样的东西

模板：

<script id="template" type="text/x-template">
    <div id="venuePage">
        <div class="header"><a href="#" class="btn">Back</a>
            <h1>{{title}}</h1>
        </div>
        <div class="scroller">
            <div class="map"><span>{{venue_address1}}, {{venue_town}}, {{venue_postcode}}</span>
            </div>
        </div>
    </div>
</script>

这是一个演示应用程序：

如果需要更改div.map的结构，请使用

<div class="map">
     {{#if map}}
     {{map}}
     {{else}}
     <span>{{venue_address1}}, {{venue_town}}, {{venue_postcode}}</span>
     {{/if}}
</div>

---

然后将data.map更新为其他内容

您可以将新变量分配到.map中，并在需要更改时重新编译模板。我将如何执行此操作？

<div class="map">
     {{#if map}}
     {{map}}
     {{else}}
     <span>{{venue_address1}}, {{venue_town}}, {{venue_postcode}}</span>
     {{/if}}
</div>

var data = {
    title : "Sample location",
    venue_address1 : "416 Water St",
    venue_town: "NYC",
    venue_postcode: "10002", 
    map: false
};