使用 javascript/jquery 修改车把模板答案

【问题标题】：modify handlebars template with javascript/jquery使用 javascript/jquery 修改车把模板
【发布时间】：2021-01-06 21:23:17
【问题描述】：

我有一个像这样的车把模板

<script type="text/html" id="some-id">
  <div class="some-class-1" {{#if some_condition}}style="color:blue;"{{/if}}>
  </div>
  <div class="some-class-2">
    <div class="some-nested-class-1">
    </div>
  </div>
  <div class="some-class-3">
  </div>
</script>

我想修改这个模板，例如在div.some-nested-class-1之后添加另一个div

我使用以下代码，将模板解析为 dom

jQuery(function ($) {
  var t = $("#some-id");
  var d = $("<div>").html(t.html());
  console.log(d.html()); 
});

但它会更改{{#if}} 如下：

  <div class="some-class-1" {{#if="" some_condition}}style="color:blue;" {{="" if}}="">
  </div>
  <div class="some-class-2">
    <div class="some-nested-class-1">
    </div>
  </div>
  <div class="some-class-3">
  </div>

在这里使用 Chrome 和 jsfiddle https://jsfiddle.net/wv7hzx5a/

如何在不影响模板的情况下实现这一点？

非常感谢

PS：模板是在单独的脚本中编译的，我无权更改。我想修改模板，以便在其他脚本编译它时，将包含新元素。

【问题讨论】：

我认为您希望您的目标 <div> 像源代码一样成为 <script>，因此浏览器不会像 HTML 那样解析内容。 jsfiddle.net/L0p1thwo/16
我认为您将很难尝试使用 jQuery 的 .html 来尝试获取原始 Handlebars 模板，因为该模板不是有效的 HTML。使用 jQuery 的 .text 将允许您获取模板的字符串值，但接下来的挑战将是如何插入额外的模板语法。我认为您应该避免修改模板。我认为您应该对通过调用模板（即模板函数的输出）生成的 HTML 进行插入/附加，而不是尝试修改模板。

标签： javascript jquery handlebars.js

【解决方案1】：

我不明白您要做什么以及将模板解析为 DOM 是什么意思。如果您想处理模板并将车把代码替换为 html，请使用车把而不是jQuery。只有车把可以解释和翻译车把指令以获得结果。一旦你有了你的结果，你可以根据需要用 jQuery 显示它。这是一个例子：

var context = {
  "mydata": [
    {
      "character-id": "Luke1",
      "firstname": "Luke",
      "name": "Skywalker",
      "age": "20",
      "rebel": true
    }, 
    {
      "character-id": "Leia1",
      "firstname": "Leia",
      "name": "Organa",
      "age": "20",
      "rebel": true
    },
    {
      "character-id": "Vader1",
      "firstname": "Darth",
      "name": "Vader",
      "age": "45",
      "rebel": false
    }
  ]
} 

// Here you process the template and put it in the DOM
var template = $('#handlebars-demo').html();
var templateScript = Handlebars.compile(template);
var html = templateScript(context);
$("#placeholder").append(html);

// Once you have inserted your code in the DOM you can now use jQuery to modify it
// For example I put a star after Leia's section
$("#Leia1").html($("#Leia1").html()+"*")
</script>

.some-class-1 {
  padding: 10;
  min-width: 10px;
  min-height: 20px;
  border: solid blue 1px;
}

.some-class-2 {
  padding: 10;
  min-width: 10px;
  min-height: 20px;
  border: solid black 1px;
}

.some-class-3 {
  padding: 10;
  min-width: 10px;
  min-height: 20px;
  border: solid green 1px;
}

<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/3.0.1/handlebars.min.js"></script>
<script type="text/html" id="handlebars-demo">
  {{#each mydata}}
    <div id="{{character-id}}">
      <div class="some-class-1" {{#if rebel}}style="color:blue;"{{/if}}>
        {{firstname}}
      </div>
      <div class="some-class-2" {{#if rebel}}style="color:blue;"{{/if}}>
        {{name}}
      </div>
      <div class="some-class-3">
        <div class="some-nested-class-1">
          {{age}}
        </div>
      </div>
    </div>
    <br/>
  {{/each}}
</script>

<div id="placeholder"></div>

【讨论】：