3

我刚开始玩把手，我正在努力理解如何在页面加载时加载一些项目，然后在 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>

返回的所有数据都是正确的，只是初始数据被覆盖而不是附加到。我觉得这与我的模板设置方式和对模板过程的普遍缺乏了解有关。我偶然发现了“部分”的想法，但不确定这是否是我应该使用的。任何人都可以向我展示应该如何构建这样的东西，或者向我指出一个有用的教程吗？我所看到的一切似乎都集中在替换所有数据上，或者只适用于初始加载。

谢谢

4

1 回答 1

1

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

我认为问题在于我的模板位于我试图附加到 ('#recipes') 的 div 中，如果我将 #recipes 移动到它自己的容器中（即模板不在其中），那么它可以工作。我不是 100% 确定引擎盖下发生了什么，但如果我将我的 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>

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

于 2012-10-31T20:55:12.977 回答