如何在Ember.js中创建生成单选按钮的组件?

时间:2013-11-28 14:35:27

标签: ember.js handlebars.js

我可以而且应该将数组传递给ember中的组件吗?

例如,如果我想模板化一些带有标签的几个单选按钮:

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

我可以以某种方式传递一个包含此内容的数组并循环遍历它。

Media, media
Guest, guest

3 个答案:

答案 0 :(得分:22)

是的,您可以将任何内容传递给组件。只需尝试一下收音机按钮

//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);

已更新(组件名称应为dasherized)

工作Radio Demo

答案 1 :(得分:2)

使用ember-radio-buttons addon

现在可以更轻松地将单选按钮放入项目中(如果您使用的是ember-cli)

安装:

npm install ember-radio-buttons --save-dev

用法:

{{radio-button value='one' checked=selectedNumber}}
{{radio-button value='two' checked=selectedNumber}}

答案 2 :(得分:1)

提升@ selva-G的答案。

我发现使用Bootstrap-for-Ember中的ButtonGroup组件实际上更清晰。 这就是我所做的:

在我视图的模板中:

<script type="text/x-handlebars" data-template-name="myview">
    {{bs-btn-group contentBinding="things" selectedBinding="selectedThing"}}
</script>

在该视图的控制器中(不一定需要是ArrayController,而是可以是通用的Ember控制器):

App.MyviewController = Ember.ArrayController.extend({
    things: [
        Ember.Object.create({value: 'first', title: 'First Thing'}),
        Ember.Object.create({value: 'second', title: 'Second Thing'}),
        Ember.Object.create({value: 'third', title: 'Third Thing'})
    ],
    selectedThing: 'second'
    selection: function() {
        console.log(this.get('selectedThing');
    }.observes('selectedThing')
});