单击列表项，显示新数据

Question

我正在制作一个看起来像这样的剧本：

这是演示：DEMO

第一页中的列表是使用javascript生成的 显示某些列表项。这工作正常，它只显示列表项 类别==类别。

$( document ).ready(function() {
var data = [{
        "name": "Lichtbediening",
        "category": "category",
        "info": "Klik voor lichtbediening",
        "img": "lichtbediening"
}, {
        "name": "Stopcontact",
        "category": "category",
        "info": "Klik voor stopcontacten",
        "img": "stopcontacten"
}, {
        "category": "Lichtbediening",
        "name": "Enkele schakelaar",
        "info": "Een knop, een lamp",
        "img": "rolluikbediening"       
}, {
        "category": "Stopcontact",
        "name": "Enkel stopcontact",
        "info": "Twee knoppen, twee lampen",
        "img": "multimedia"     
}];

var output = '';
$.each(data, function (index, value) {
    if(value.category != 'category') {
        return;
    } else {
        output += '<li><a href="#">'
        output += '<img src="img/' + value.img + '.jpg">'
        output += '<h2>' + value.name +'</h2>'
        output += '<p>' + value.info + '</p>'
        output += '</a></li>';
    }
});

$('#list_zoek_category').html(output).listview("refresh");

});

现在我想在单击一个列表项时显示新列表。首先我想 生成一个新列表，它只显示类别相同的列表项 单击项目的名称。示例：当我在第一个列表中单击名称为“lichtbediening”的列表项时，新列表仅显示具有类别的列表项：“lichtbediening”。

最好的方法是什么？重新生成当前列表或转到新页面是否更好？但要记住，当我点击第二个列表中的项目时，我想转到详细页面。此外，我想创建一个后退按钮来显示上一个视图。

任何人都可以给我一些建议，也许可以帮助我开始这个方向吗？