在 Ember 中将 Handlebars 插入 DOM答案

【问题标题】：Inserting Handlebars to the DOM in Ember在 Ember 中将 Handlebars 插入 DOM
【发布时间】：2015-06-16 13:25:18
【问题描述】：

我正在根据来自服务器的数据生成一个复选框和单选按钮列表。该页面是使用 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 助手是可行的方法。但是当我尝试使用把手插入单选按钮时，newHtml 设置如下：

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

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

【问题讨论】：

你试过jquery改变事件吗？
是的，您需要先编译此代码，并且直接更改内部 HTML 不是要走的路。
我看过实现 onclick，但似乎 Ember 不太喜欢这样，而且绕过它有点麻烦（我还不是很有经验！），会jquery 更改遇到同样的麻烦？
你能用jquery粘贴你在change事件上的表现吗？
<input type="radio" id="radio1" name="radio onclick=function(this) />

标签： javascript ember.js handlebars.js

【解决方案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")); 
});

小提琴

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

【讨论】：