Question

我刚开始玩把手，我很难理解如何在页面加载时加载一些项目，然后在ajax请求上加载更多项目并使用相同的模板将它们附加到内容中。页面正确加载初始数据，但在第二个请求中，所有初始数据都被覆盖。

容纳所有内容的div是#recipes

 <a href="#" id="more">Show More</a>
 <div id="recipes">

    <script id="Handlebars-Template" type="text/x-handlebars-template">
        <div id="Content">

          {{#each Recipes}}
            <div class='Box'>

                <h3>{{Name}}</h3>

            </div>
          {{/each}}
        </div>
    </script>
    </div>
    <script type="text/javascript">
    $.ajax({
        url : 'Recipe.php',
        success:function(data){
            var Recipes = JSON.parse(data);
            var Source = document.getElementById("Handlebars-Template").innerHTML;
             var Template = Handlebars.compile(Source);
            var HTML = Template({ Recipes : Recipes });
            document.getElementById('recipes').innerHTML +=HTML;
        }
    });
   </script>

当用户点击“显示更多”时，将运行以下代码

  <script>
    $(function(){
        $('#more').click(function(e){
            $.ajax({
        url : 'Recipes2.php',
        success:function(data){
            var Recipes = JSON.parse(data);
            var Source = document.getElementById("Handlebars-Template").textContent;
             var Template = Handlebars.compile(Source);
             var HTML = Template({ Recipes : Recipes });
            $('#recipes').append(HTML);
        }
    })
        });
    });

    </script>

返回的所有数据都是正确的，只是初始数据被覆盖而不是附加到。我感觉这与我的模板设置方式以及对模板化过程的普遍缺乏了解有关。我偶然发现了“局部”的想法，但不确定这是否是我应该使用的。有没有人能够告诉我这样的事情应该如何构建或指向我有用的教程？我所见过的所有东西似乎都专注于替换所有数据，或者仅适用于初始加载。

由于

Answer 1

好吧，我想我已经找到了如何做我想做的事，但我不确定它是否是解决这个问题的最佳解决方案，或者我是否正确地做事。

我认为问题在于我的模板位于我试图追加到的div中（'#recipes'）如果我将#recipes移动到它自己的容器上（即模板不在其中）然后这很有效。我不是百分之百确定引擎盖下发生了什么，但是如果我将我的html修改为如下所示的结构，这是有效的。我会把这个问题留给其他人，让他人在几天内完全解释这个问题，而不是点击我自己的答案，看看是否有人可以解释为什么会这样。

感谢

<div id="recipes"></div><!--Recipes no longer encloses the template -->
    <script id="Handlebars-Template" type="text/x-handlebars-template">
          {{#each Recipes}}
            <div class='Box'>
                <h3>{{Name}}</h3>

            </div>
          {{/each}}

    </script>

* * 更新看起来这个问题取决于样式。预期的结果是存在的，但是教程的样式是使用绝对定位，所以看起来结果没有更新。然而，还有其他问题，事实上一些内容位于模板中本来不应该，因此一些javascript事件没有正确触发，因为最初覆盖了包含模板的innerHTML（所以在第二次运行时模板不再存在）

把手模板 - 附加物品

1 个答案: