把手模板 - 附加項目

我剛開始玩弄的把手，我很努力去理解如何加載頁面加載一些項目，然後在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>

被退回所有的數據是正確的，這只是初始數據被覆蓋而不是附加到。我有一種感覺，這與我的模板設置和模板過程的普遍缺乏理解有關。我偶然發現了「偏見」的想法，但不知道這是我應該使用的。任何人能夠告訴我這樣的事情應該如何構建或指向我一個有用的教程？我見過的所有東西似乎都集中在替換所有數據上，或者只在初始加載時工作。

感謝

來源

2012-10-31 TommyBs

好吧，我想我已經制定了如何做我想做的，但我真的不知道，如果它是對這一問題的最佳解決方案，或者如果我在做正確的事情。

我認爲問題在於我的模板位於div中我試圖附加到（'#recipes'）如果我將#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>

* * UPDATE 它看起來像這個問題是到造型。預期的結果在那裏，但教程的樣式使用絕對定位，所以看起來結果沒有更新。然而，還有其他問題，事實上，有些內容位於模板本來不應該存在的位置，所以一些JavaScript事件沒有正確觸發，原因是最初覆蓋了包含模板的innerHTML（所以在第二次運行時該模板不再存在）

來源

2012-10-31 20:55:12 TommyBs

把手模板 - 附加項目

回答

相關問題