jQuery的车把错误

Question

我对此功能有疑问：

            function setGalleryTemplate() {
                var projectData = JSON.parse(localStorage.getItem(keyName) ),
                    template = Handlebars.compile( $('#gallery-template').html() );

                $('#Gallery').html( template(projectData) );
            };

这是 HTML：

    <div id="Gallery">
    <script id="gallery-template" type="text/x-handlebars-template">
        <ul class="field-list">
            {{#each this.project.modules}}
                <li class="field-item">{{this.id}}</li>
            {{/each}}
        </ul>
   </script>
</div>

点击图片时调用它，它应该显示来自 json 文件的一些细节。如果第一次单击图像，这可以正常工作。如果第二次单击它（或其他图像），我会收到此“错误：您必须将字符串或 Handlebars AST 传递给 Handlebars.compile。您传递了未定义”。

如果 ."html" 被替换为 ".append" ，这并不是我真正想要的。我想“替换”内容（.replaceWith 也不起作用），而不是追加新内容。

Answer 1

由于<script> 是<div> 内容的一部分，设置.html() 也会从文档中删除<script>，使其无法下次使用。

您只需要compile 和template 一次，因此它不依赖于<script> 的存在。

var galleryTemplate;

function setGalleryTemplate() {
    // compile on-demand, but only once
    if (!galleryTemplate)
        galleryTemplate = Handlebars.compile( $('#gallery-template').html() );

    var projectData = JSON.parse(localStorage.getItem(keyName) );

    $('#Gallery').html( galleryTemplate(projectData) );
}

或者，调整标记使<div> 和<script> 是兄弟而不是父/子，因此<script> 保留在文档中，而<div> 的内容被替换：

<div id="Gallery"></div>
<script id="gallery-template" type="text/x-handlebars-template">
    <!-- ... -->
</script>