jQuery data() method inside templates

Question

I'm experimenting using jQuery templates with Knockout.js to have a nice decoupled UI & logic webapp. In a previous iteration, I'd manually built up a list of data by looping through, and adding the actual object I was formatting to the list item using the data() method - this meant I could easily extract the object after a click, then do operations on it, eg:

function createBusCatListItem(busCat) {
    var $item = $("<li>");
    $item.data("busCat", busCat);
    var $text = $("<span>").html(busCat.busCatName)
    $text.addClass("listText");
    $text.click(function () {
        handleCategoryClick(this);
    });
    $text.appendTo($item);
    return $item;
}

Is there a way of using data() inside a jQuery template, or does it only deal with mark-up so I should just put the id inside a "data-id" tag, and use that as a lookup, eg:

 <script id="selectableCategory" type="text/html">
        <li data-id="${busCatCode}"> ${busCatName} </li>
    </script>

All suggestions gratefully received

cheers

T

Answer 1

If you want access to the object that was used while rendering your template, you might be able to use tmplItem().data as described here: http://api.jquery.com/jquery.tmplitem/

Here is a sample on JSFiddle: http://jsfiddle.net/rniemeyer/tLnwx/