javascript - 如何使用 Handlebars 数据填充隐藏的 div？

Question

Handlebars 数据在静态页面上显示正常，但问题是我还有一个模态，但数据没有在模态上正确填充。

我正在使用 avgrund 模态 (you can view the Codepen here)

main.js - Handlebars 代码

var projectData = [
    {
        id: "0",
        name: "Jack",
    },
    {
        id: "1",
        name: "Sally",
    },
];
var theTemplateScript = $("#project-template").html();
var theTemplate = Handlebars.compile(theTemplateScript);
$("#content").append(theTemplate(projectData));

index.html

<div id="content">
<script id="project-template" type="x-handlebars-template">

    <div class="pile">
      {{#each this}}

        <a onclick="avgrund.activate( 'stack' );">

          <div class="box box{{id}}">
              <span class="project_name project_name{{id}}">{{name}}</span>
          </div>

        </a>



          <aside class="avgrund-popup">
            <h2>{{name}}</h2>
            <p>
           You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
            </p>
          </aside>
      {{/each}}
    </div>
  </script>
</div>

问题

div 框会正常显示，但每当我单击框以显示模态时，模态仅显示 projectData 中的最后一个元素。

当我使用 bootstrap modals 时，我已经能够让数据显示正常，但由于某些原因不是 avgrund modal。

提示可能的解决方案？

我认为 this StackOverflow q: how to populate hidden form field 的答案提示可能有用的东西，例如取出数据并将其重新插入到 avgrund 模态代码中，这样

var data = {
"Value": [
    {"Id": "6b7", "Notes": "testing", "CreatedBy": "User1"},
    {"Id": "6b7", "Notes": "Testing 1", "CreatedBy": "User2"}
]};
data.Id = data.Value[0].Id;
var tmpl = Handlebars.compile($('#template').html());
var html = tmpl(data);

但我不完全理解答案，无法让它发挥作用。有人能指出一些可能有用的方法或指导原则吗？

Answer 1

这是一个显示工作示例的 fiddle :http://jsfiddle.net/9f9w1trs/

正如 Roamer-1888 所指出的，您有一个额外的关闭 </div>在那里。您没有包含实际编译模板并填充它的代码。

基本思想是你定义一个模板——就像你做的那样

<script id="project-template" type="x-handlebars-template"> ....</script>

然后您“编译”模板(出于性能原因或如果您只想使用轻量级运行时库而不是完整库，您可以预编译它们)。

var source = $("#project-template").html();
var template = Handlebars.compile(source);

然后您可以用数据填充您的模板...

var populatedHtml = template(projectData);

最后将填充的 HTML 添加到 DOM

$('#myContent').append(populatedHtml);

Handlebars 并不关心你是否将它添加到隐藏的 div - 它只是替换 {{}} 之间的内容;)