2

このプロジェクトでは、jQuery、jQuery Mobile、Handlebarを使用しています

以下のようなコースページがあります。

ここに画像の説明を入力してください

コースをクリックすると、コースの特定のレッスンを含む以下のページが表示されます。

ここに画像の説明を入力してください

上記のレッスンは、ハンドルバーを使用するJSONから取得したものです。以下はハンドルバーテンプレートです。

<script id="lessontemplate" type="text/x-handlebars-template">
    {{#each this}}
        <li><a href="{{lesson}}">{{lessonname}}</a></li>
    {{/each}}
</script>

以下は、テンプレートを置き換えるJSコードです。

("#mycourses").on('click','.mycourse',function(e){

            e.preventDefault();
            var url = domainURL+'coursedata.php?callback=?';    
            $.getJSON( url, { courseid: $(this).data('courseid') }, function( data ) {

            var tmpl = $('#lessontemplate').html();
            console.log(tmpl);
            $('h1.coursename').html(data.coursename);
            lessontemplate = Handlebars.compile( tmpl );
            console.log(    lessontemplate(data.coursedetails) );
            $('ul#lessons').html( lessontemplate(data.coursedetails) );
            $.mobile.changePage("#coursedetails", {transition: 'slide'}); 

            });

        });

次に、コースページに移動してコースをクリックすると、レッスンが正しく表示されません。以下の出力を示します。

ここに画像の説明を入力してください

最初にクリックしたConsole.log（）の出力は次のとおりです

    {{#each this}}
        <li><a href="{{lesson}}">{{lessonname}}</a></li>
    {{/each}}

        <li><a href="1">Lesson Name 1</a></li>

        <li><a href="2">Lesson Name 2</a></li>

        <li><a href="3">Lesson Name 3</a></li>

2回目のクリックConsole.log（）の出力は次のとおりです

    {{#each this}}
        <li><a href="{{lesson}}">{{lessonname}}</a></li>
    {{/each}}


        <li><a href="1">Lesson Name 1</a></li>

        <li><a href="2">Lesson Name 2</a></li>

        <li><a href="3">Lesson Name 3</a></li>

1回目のConsole.log（）= 2回目のConsole.log（）をクリックしますが、2回目に正しい出力が得られないのはなぜですか？2回目のレッスンが正しく表示されないのはなぜですか？

4

1 に答える 1

3

@Gajotres-私を正しい方向に向けてくれてありがとう。

あなたがしなければならないことは

if ( $('ul#lessons').hasClass('ui-listview')) 
{
 $('ul#lessons').listview('refresh');
} 
else {
 $('ul#lessons').trigger('create');
}

ドキュメントから取得。

リストビューにアイテムを追加する場合は、そのリストビューでrefresh（）メソッドを呼び出して、スタイルを更新し、追加されるネストされたリストを作成する必要があります。例えば：

$（'＃mylist'）。listview（'refresh'）;

refresh（）メソッドは、リストに追加された新しいノードにのみ影響することに注意してください。これは、パフォーマンス上の理由から行われます。すでに拡張されているリストアイテムは、更新プロセスによって無視されます。これは、すでに拡張されたリストアイテムのコンテンツまたは属性を変更した場合、これらは反映されないことを意味します。リストアイテムを更新する場合は、refreshを呼び出す前に新しいマークアップに置き換えてください。

アップデート

Gajotresは他の同様の質問に答えます

于 2013-03-27T10:09:07.317 に答える