Как правильно описать в jquery+jsrender такую конструкцию?

Question

[slowkazak]

Добрый день, есть такой массив данных для jsrender:

mainlist = [
{ id: "1", title: "Молочные продукты", 
products: [ 
{ art: "1", prodname:"Кефир", annotation: "нет данных", weigth: "100 мл", price: "35" } 
]
},
    { id: "2", title: "Хлебобулочные изделия",
products: [
    { art: "3", prodname:"Еда1", annotation: "1", weigth: "1000 гр", price: "100" }
    ]
}
];

Есть соответсвующие шаблоны. Я их сокращу, но тем не менее суть ясна:

$.templates({
catsTemplate: "<li><a href='#{{:id}}'>{{:title}}</a></li>", productsTemplate: "{{for products}}\n\ {{:prodname}}\n\ {{/for}}", )};

  html = $.render.catsTemplate(mainlist);
  $( "#cats" ).html(html);
  html = $.render.productsTemplate(mainlist);
  $( "#childpanel" ).html(html);

а данный момент рендерятся все категории и все продукты.Прошу подсказать, как сделать так чтоб при клике на ссылку категории(к примеру с href="#1")
Рендерился массив products соответсвующий только этй категория(то есть кусок с id:1)?

Answer 1

[Сергей Мельников]

Я думаю, надо написать какой-то нужный js код и тогда оно будет так работать...
Где-то так. Я сокращу, но тем не менее суть ясна:

$("a href^='#'").on("click", function() {
  /* получаем id категории и рендерим шаблон */
});