如何创建一个在Ember.js中生成单选按钮的组件？ [英] How do I create a component that generates Radio-buttons in Ember.js?

问题描述

例如，如果我想模拟一些使用标签呈现几个单选按钮的东西：

 < label for =media>媒体< / label>< input type =radioname =entry.1602323871 value =mediaid =media/> 
< label for =guest>访客< / label>< input type =radioname =entry.1602323871value =guestid =guest/> 
  

我可以通过这个内容传递一个数组，并循环通过它。

 媒体，媒体
访客，客人
  

解决方案

是的，你可以传递任何内容到组件。只是尝试收音机按钮

  //基本收音机组件
 App.RadioButton = Ember.Component.extend （{
 tagName：input，
 type：radio，
 attributeBindings：[name，type，value，checked：checked]，
 click：function（）{
 this.set（selection，this。$（）。val（））; 
}，
 checked：function（）{
 return this.get（value）=== this.get（selection）; 
} .property（'selection'）
}）; 
 Em.Handlebars.helper（'radio-button'，App.RadioButton）; 
  

已更新（组件名称应为dasherized）

工作电台演示

Can I and should i pass arrays to components in ember?

For example if I wanted to template something that renders a couple of radiobuttons with labels:

<label for="media">Media</label><input type="radio" name="entry.1602323871" value="media" id="media" />
<label for="guest">Guest</label><input type="radio" name="entry.1602323871" value="guest" id="guest" />

Could I somehow pass an array with this content and loop through it.

Media, media
Guest, guest

解决方案

Yeah, You can pass anything to components. Just a try to the radio-buttons

//Basic radio Component
App.RadioButton = Ember.Component.extend({
  tagName : "input",
  type : "radio",
  attributeBindings : [ "name", "type", "value", "checked:checked" ],
  click : function() {
    this.set("selection", this.$().val());
  },
  checked : function() {
    return this.get("value") === this.get("selection");
  }.property('selection')
});
Em.Handlebars.helper('radio-button',App.RadioButton);

Updated (component name should be dasherized)

Working Radio Demo

这篇关于如何创建一个在Ember.js中生成单选按钮的组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！