车把模板传递数据

Question

我有以下车把模板 -

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();
    }
}

谢谢

Answer 1

您可以使用 HTML 数据属性来存储每个项目的整个记录​​。

例如在您的处理程序栏模板中

替换

'

'

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

有几种方法可以将数据传递到新页面（会话、查询字符串、cookie 等），但是在不了解您的项目的情况下，将所有内容保留在一个页面上并显示/隐藏基础部分可能是有意义的关于用户操作。向导控件甚至可以在这里工作。

或者，您可以在新页面上进行另一个 Ajax 调用，如果它只是针对单个记录，那么应该不会太难