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 homepage作为模板填充var venueList。

这一切都按照我的意愿运作，每个场地都显示在我的UL中。我试图理解的困难是我的过程的下一部分。

我允许用户点击任何一个场地。这将带他们到下一页，它将有更多关于他们点击的地点的信息。我用于AJAX调用的函数检索有关场地的所有内容，而不仅仅是名称。我如何在下一页上最好地获取该地点的信息？我是否存储每个场地信息的数组并根据用户点击的场地名称传递？如果是这样，我最好怎么做呢？

我想保留这个使用模板系统把手给我的，我对此非常非常新。

修改

这就是我用来创造＆＃34;页面＆＃34;在我的混合应用程序中

$(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数据属性存储每个项目的整个记录。

e.g。在您的处理程序栏模板

中

替换

'＆LT; li＆gt;'

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

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

或者你可以在新页面上进行另一个Ajax调用，如果它仅用于单个记录那么应该有点过多的

把手模板传递数据

1 个答案: