jQuery templates binding to html data attributes

I'm creating a simple theme selector where my <option> elements contain data attributes containing the information that I need to render in my template:

<option data-themeimage="/content/images/themes/default.png" 
    data-themedescription="A description of the default theme" value="Default">Default Theme</option>
<option data-themeimage="/content/images/themes/dark.png" 
    data-themedescription="A description of the dark theme" value="Dark">Dark</option>

When you select a theme, a div is updated containing the theme preview and it's description.

Currently, I'm having to make this call when the page loads (showing the details of the selected item) and then onChange.

Is it possible with the jQuery Templates plugin, to bind directly to an element's data properties?

Note: I know there are frameworks like KnockoutJs for doing this but this would be an overkill for me as I only need to do this is a few places.

Here's what I'm doing currently:

    var selectTheme = function () {
        var $theme =开发者_开发问答 $("option:selected", $("select#Theme"));
        $(".theme-details").empty();
        $("#themeTemplate").tmpl($theme.data()).appendTo(".theme-details");
    };

    selectTheme();
    $("select#Theme").change(selectTheme);

---

Have you tried triggering a change on domready?

$(function(){
    $("select#Theme").trigger("change");
});