如何使用手棒数据填充隐藏的div？

Question

工具栏数据在静态页面上显示得很好，但问题是我也有一个模型，而且数据在模型上没有被正确地填充。

我使用avgrund模态(您可以在这里查看Codepen )

main.js -车把代码

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中的最后一个元素。

当我使用引导模式时，我已经能够让数据显示得很好，但是由于某些原因，没有使用avgrund模式。

暗示一个可能的解决方案？

我认为这个StackOverflow q:如何填充隐藏表单字段的答案暗示了一些可能有用的东西，例如取出数据并将其重新插入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

这里有一个小提琴，它展示了一个有用的例子：http://jsfiddle.net/9f9w1trs/

正如罗默-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);

将其添加到隐藏的div中与否并不真正重要-它只是替换{}之间的内容;)