Question

我正在使用此代码在我的应用程序中呈现模板 -

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");

在此之后我想使用.map操纵jQuery这在jQuery代码运行时不起作用，.map元素当前不在DOM中。< / p>

对我来说，达到我需要的最佳方式是什么？

由于

Answer 1

你可以试试这样的事情

模板：

<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>

和JS（我正在使用jQuery）

//Asign data first time on load
var data = {
    title : "Sample location",
    venue_address1 : "416 Water St",
    venue_town: "NYC",
    venue_postcode: "10002"
};

var template = $('#template').html();

var templateCompile = Handlebars.compile(template);
$('body').html(templateCompile(data));

//Now some action occurs and it's time to update template

data.venue_address1 = "100 Water St";
data.venue_town = "NYC";
data.venue_postcode = "10000";


$('body').html(templateCompile(data));

这是一个演示应用：http://jsfiddle.net/UMBGC/33/

如果您需要更改div.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
};

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

把手模板访问DOM中的元素

1 个答案: