javascript - 在 Ember 中将 Handlebars 插入 DOM

Question

我正在根据来自服务器的数据生成复选框和单选按钮列表。该页面是使用 Ember 的 Handlebars 模板。为了在页面上生成我的列表，我使用以下代码行:

document.getElementById('radioList').innerHTML = newHtml;

如果 newHtml 设置为类似以下内容，则效果很好:

<li><input type="radio" id="radio1" name="radio /><label for="radio1">List item one</label></li>

但是，我希望根据这些单选按钮(或复选框)被选择或取消选择来触发事件 - 经过一番谷歌搜索后，似乎使用 Handlebars 助手是可行的方法。但是，当我尝试使用 Handlebars 插入单选按钮时，newHtml 设置如下:

<li>{{input type="radio" id="radio1" name="radio }}<label for="radio1">List item one</label></li>

仅显示文本而不是单选按钮本身。进一步研究这一点似乎表明我插入的 Handlebars 模板需要重新编译？我可能是错的，但我花了相当多的时间寻找这个问题的答案，但似乎找不到它们。任何帮助将不胜感激!

Answer 1

这可能会帮助您使用 jQuery 来完成此操作。

例如使用按钮触发

<h2>Click and select radio button</h2>
<input type="button" id="btn" value="Generate"/>
<input type="hidden" value="1" id="hid" />

JQUERY

$("#btn").click(function(){
    var generatedradios=$("#hid").val();

    var str='<input type="radio" class="generated" data-generated="'+generatedradios+'" id="radio1" name="radio" />';
    $("#hid").val(Number(generatedradios)+1);
    $("body").append(str);
});

$(document).on("change",".generated",function(){
   alert($(this).attr("data-generated")); 
});

fiddle

http://jsfiddle.net/Isakkiraj/wLg1p8as/