1

私は JavaScript とライブラリが初めてなので、これは簡単な質問かもしれません。handlebars.js テンプレート エンジンと jQuery を使用して、いくつかの単純な Web ページを作成しようとしています。私が遭遇し続ける問題は、複数のページを作成することです。これまでのところ、異なる名前のメイン ページが 1 つあります。各名前には jquery クリック関数があります。名前をクリックすると、jQuery を使用して現在のページを変更するだけです。基本的に、名前をクリックすると、その人物の写真のリストを含む新しいテンプレートが表示されますが、同じページに index.html と表示されます。これの問題は、最初のビューに戻りたい場合、「戻る」ボタンが機能しないことです。これを間違って構造化していますか？リンクを別のページと別のテンプレートに送信する必要がありますか? もしそうなら、どのリンクが押されたかに基づいてテンプレートを生成するにはどうすればよいですか。

$(document).ready(function(){


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

data = { date: "today", firstUsers: [
{firstName: "person1", pictures: ["pic1", "pic2", "pic3"]},
{firstName: "person2", pictures: ["pic1", "pic2", "pic3"]},
{firstName: "person3", pictures: ["pic1", "pic2", "pic3"]},
{firstName: "person4", pictures: ["pic1", "pic2", "pic3"]},
]
};
$(".container").html(template(data))

$("li").click(function(){
    var name = $(this).html()
    $.each(data.firstUsers, function(i, item){
        if(name === item.firstName){
            y = item.pictures
            return y
        };//if function
    });//each function


    $(".container").hide()
    var source = $(".some-script").html();
    var template = Handlebars.compile(source);
    datas = {namer: name, pictures: y,}
    //console.log(datas.pictures)
    $(".content").html(template(datas))
});//click function
});//document ready
4

1 に答える 1

2

ベスト プラクティスを使用すると、おそらく各ページに URL を関連付ける必要があります。window.history.pushStateを使用する場合、戻る/進むボタンを機能させるかなり簡単な方法があります。

したがって、基本的には次のように機能します。

  1. 新しいテンプレートをロードするたびに、新しいブラウザーの状態をプッシュします。
  2. イベントをリッスンし、onpopstate起動時に適切なテンプレートをロードします。

再利用性のために、上記の関数を 2 つの別々の関数に分けます。

function loadUser(name) {
    var y;
    $.each(data.firstUsers, function(i, item){
        if(name === item.firstName){
            y = item.pictures
            return y
        };//if function
    });//each function

    $(".container").hide()
    var source = $(".some-script").html();
    var template = Handlebars.compile(source);
    datas = {namer: name, pictures: y,}
    //console.log(datas.pictures)
    $(".content").html(template(datas))
    window.history.pushState(null, null, name);
}

// Find the name of the user
// TODO: change the regex to match your URL scheme
function popStateResponder() {
    var name = window.location.pathname.match(/\w+$/)[0];
    loadUser(name);
}

$("li").click(function(){
    var name = $(this).html(),

    loadUser(name);
});//click function

$(window).on('popstate', popStateResponder);

いくつかの変更が必要になる場合がありますが、これは私がこの種のタスクによく使用する一般的なワークフローです。

于 2013-03-14T15:44:16.953 に答える