3

私はハンドルバーをいじり始めたばかりで、ページの読み込み時にいくつかのアイテムをロードする方法を理解するのに苦労しています。次に、ajax リクエストで、より多くのアイテムをロードし、同じテンプレートを使用してコンテンツに追加します。ページは初期データを正しくロードしますが、2 番目の要求ではすべての初期データが上書きされます。

すべてのコンテンツを格納する 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

わかりました、私は自分がやりたいことをする方法を考え出したと思いますが、それがこの問題に対する最善の解決策なのか、それとも私が正しくやっているのかはよくわかりません.

問題は、追加しようとしている 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 イベントが正しく起動されませんでした (2 回目の実行で)。テンプレートはもう存在しません）

于 2012-10-31T20:55:12.977 に答える