在 emberjs 中获取引导按钮组无线电工作

【问题标题】：Get bootstrap buttongroup radio work in emberjs在 emberjs 中获取引导按钮组无线电工作
【发布时间】：2014-04-30 16:51:07
【问题描述】：

我正在尝试使用引导程序中的 ember 组件实现无线电切换。

这就是我显示列表的方式。在引导程序中，当单击按钮时，“活动”类将附加到其标签标签中。

如何在标签中设置默认值和切换活动类。 JSBIN my attempt

 <script type="text/x-handlebars" data-template-name="index">
   {{radiobutton-list content=radioOptions selected=selectedValue}}
 </script>

  <script type="text/x-handlebars" data-template-name="components/radiobutton-list">
  <div class="btn-group" data-toggle="buttons">
    {{#each content}}
       <label {{bind-attr class = ":btn :btn-primary" }}>
         {{radio-button}}{{label}}
        </label>
  {{/each}}
  </div>

【问题讨论】：

标签： twitter-bootstrap ember.js

【解决方案1】：

解决方案背后的想法（我为此奋斗了很长时间）是：

创建一个单选按钮组件，该组件知道如何选择自身并对选择更改做出反应：
创建一个选择器组件，该组件在您的列表上进行迭代并提供以下内容：
- 一个 didInsertElement 钩子，用于在插入页面时根据模型 selectedVal 进行初始选择，
- 一个属性observer（值），它对单选按钮选择器中的值变化作出反应，并触发afterRender事件，在该事件中将进行活动类适应。（注意：为什么我们必须这样做在代码的 cmets 中进行了解释......）；它也必然会触发组件选择更改事件，因此您可以根据需要连接到它！
- 单选按钮组件中的classNameBindings对于获取输入组件上的活动类也非常重要！

所有这一切都与隐藏输入单选按钮的 CSS 规则相结合，我们就完成了！

JSBin solution

【讨论】：