Question

为了简化和控制，我有自己的js模板引擎，其工作原理如下：

HTML：

 <ul id="persons">
    <li class="person-template hide">
       <span>{name}</span>, <span class="placemark" data-lat="{latitude}" data-lng="{longitude}">{location}</span>
    <li>
 </ul>

JS：

 var persons = [
       {"name":"hulk", "location": "usa", latitude: -33.4, longitude: -70.5}, 
       {"name":"wolverine", "location": "mexico", latitude: -33.4, longitude: -70.5}, 
 ];


 $.each(persons, function(i, person) {
      var html = $(".person-template").clone().removeClass("person-template").addClass("person").show().outerHtml();

      html = html.replaceAll("{name}", person.name);
      html = html.replaceAll("{latitude}", person.latitude);
      html = html.replaceAll("{longitude}", person.longitude);
      html = html.replaceAll("{location}", person.location);
 });

（replaceAll和outerHtml是我做过的两个辅助函数，它们可以通过名字自行解释。

我的问题是，有时我想用jQuery选择东西，但我的模板符号会干扰，例如：

$(".placemark").each(function(i, v) {
     alert($(v).data("latitude")));
});

将发出警告：“{latitude}”，“ - 33.4”，“ - 33.4”
显然我想避免使用模板值。

对此最干净的解决方案是什么？

开始使用正式的模板引擎？
先跳过$ .each？（有点难看）
...？

Answer 1

您正在克隆模板，因此它仍然存在。你需要在循环后删除它。

$(".person-template").remove();

或者，您可以确保在发出警报时不要抓取人员模板。 $（“。location_but_not_location_template”）。每个......

在我自己的js模板系统/引擎中使用jquery进行选择

1 个答案: