jQuery 模板绑定到 html 数据属性

Question

我正在创建一个简单的主题选择器，其中我的 <option> 元素包含数据属性，其中包含我需要在模板中呈现的信息：

<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>

当您选择一个主题时，会更新一个包含主题预览及其描述的 div。

目前，我必须在页面加载（显示所选项目的详细信息）然后 onChange 时进行此调用。

是否可以使用 jQuery 模板插件直接绑定到元素的数据属性？

注意：我知道有像 KnockoutJs 这样的框架可以做到这一点，但这对我来说有点矫枉过正，因为我只需要在几个地方这样做。

这是我目前正在做的事情：

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

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

Answer 1

您是否尝试过在 domready 上触发更改？

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