2014-05-19 122 views
0

我有以下的車把模板 -車把模板傳遞數據

var homePage = 
    '<div>' + 
     '<div id="homepage">' + 
      '<div class="header"><h1>Venues</h1></div>' + 
      '<div class="scroller">' + 
       '<ul class="list">' + 
       '</ul>' + 
      '</div>' + 
     '</div>' 
    '</div>'; 
var template = Handlebars.compile(homePage); 

var venueList = 
    '<a href="#page1">' + 
     '<li>' + 
      '<div class="list-left">' + 
       '<div class="list-profile"></div>' + 
      '</div>' + 
      '<div class="list-right">' + 
       '<div class="list-title">{{name}}</div>' + 
       '<div class="list-span">{{address.town}}, {{address.county}}</div>' + 
      '</div>' + 
      '<div class="clear"></div>' + 
     '</li>' + 
    '</a>'; 

我有一個函數,使一個AJAX調用來獲取地點的完整列表。這將使用var venueList作爲模板填充var homepage

這一切都按我的願望運作,每個場地都顯示在我的UL中。我難以理解的是我的過程的下一部分。

我允許用戶點擊任何場地。這將帶他們進入下一頁,其中將會有更多關於他們點擊的場地的信息。我用於AJAX呼叫的功能可以檢索有關場地的所有內容,而不僅僅是名稱。我如何最好地在下一頁的特定場地獲取信息?我是否存儲了每個場館信息的數組,並通過依賴於用戶點擊的場地名稱來傳遞這些信息?如果是這樣,我最好怎麼做呢?

我想保留這個使用模板系統的把手給我,而我對此非常非常新。

編輯

這是我使用我的混合應用程序中創建的「頁面」的意義

$(window).on('hashchange', route); 

// Basic page routing 
function route(event){ 
    var page, 
     hash = window.location.hash; 

    if(hash === "#page1"){ 

    }else{ 
     var template = Handlebars.compile(homePage);   
     page = template(); 
    } 
} 

感謝

回答

0

你可以使用HTML數據屬性存儲什麼每個項目的整個記錄​​。

例如在您的handlerbars模板

更換

'< LI>'

'<li data-venuedetails={{this}}'

有幾種辦法來將數據傳遞到新的頁面(會話,查詢字符串,餅乾等等)然而,不知道你的項目太多,它可能是有意義的,保持在一個頁面上顯示/隱藏基於用戶操作的部分。一個嚮導控件甚至可能在這裏工作。

或者你可以使新的頁面上的其他Ajax調用,如果它只是一個單一的記錄應該有一點overhard

+0

我的項目是一個混合的應用程序,所以只限於JS吧。我正在監聽hashchange,以檢測用戶「更改」頁面的更新時間,並使用處理該部分的代碼進行更新。所以當用戶點擊場地時。我不確定如何從新模板訪問data-rel。 – user3611576