0

複数ページのjQueryモバイルページがあります。

ページ1からページ2に移動すると、ハンドルバーを使用して動的に作成したテンプレートが表示されます。

テンプレート：

<script id="history-template" type="text/x-handlebars-template">
        <div data-role="collapsible" id="share_history" >
       <h3>{{share_title}}</h3>
       {{#each historyItem}}
          <h2>Shared with {{shared_with}}</h2>
          {{#list people}}{{firstName}} {{lastName}}, {{role}}{{/list}}
      {{/each}}
    </div>
</script>

javascript：

var context = {
    share_title: "View Share History",
    historyItem:  [
            {
                shared_with: "with a group",
                people: [
                    {firstName: "Bob", lastName: "Wong", role: "Dad" },
                    {firstName: "Tina", lastName: "Turner", role: "Guardian" },
                    {firstName: "Modest", lastName: "Mouse", role: "Dad" }
                ]
            },
            {
                shared_with: "with 3 people",
                people: [
                    {firstName: "Baily", lastName: "Wong", role: "Dad" },
                    {firstName: "Gina", lastName: "Turner", role: "Guardian" },
                    {firstName: "Modest", lastName: "Mouse", role: "Dad" }
                ]
            }
        ]

};

var source   = $("#history-template").html();
var template = Handlebars.compile(source);

Handlebars.registerHelper('list', function(people, options) {
var out = "<ul class=>";

for(var i=0, l=people.length; i<l; i++) {
out = out + "<li>" + options.fn(people[i]) + "</li>";
}

return out + "</ul>";
});

    var html    = template(context);

    $('#share').html(html);
$.mobile.changePage('#add-edit');

1ページ目から2ページ目（複数ページのレイアウト）に移動すると、機能します（良好）。

しかし、戻るボタンをクリックしてから2ページに戻ると、コンテンツが表示されます... jQuery mobileが追加する追加のマークアップを差し引いたものです（つまり、コンテンツは表示されますが、jQuery mobileの外観/テーマは表示されません）。

編集

私の例では、次のことを行う必要がありました。

$('#share').html(html).trigger( "create" );
4

1 に答える 1

3

html要素でcreateイベントをトリガーする必要があります。例：

el.trigger('create');
于 2012-11-23T15:14:43.277 に答える