emberjs 中的radio按钮

为什么80%的码农都做不了架构师？>>>   

emberjs 的helpers类库中并没有提供radio单选按钮控件，虽然这个控件是常用的控件之一，但ember就是没有提供，需要自己编写。不过并不困难，这里给出一个可以使用的radio group单选按钮例子

 

创建一个RadioButton视图

通过视图来封装HTML的radio控件，提供用户行为处理

App.RadioButton = Ember.View.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()
});

 

创建单选按钮的群组

<label>{{view App.RadioButton name="attrType" selectionBinding="attributeType" value="activity"}}
activity
</label>
<label>{{view App.RadioButton name="attrType" selectionBinding="attributeType" value="destination"}}
destination
</label>
<label>{{view App.RadioButton name="attrType" selectionBinding="attributeType" value="flight"}}
flight
</label>
<label>{{view App.RadioButton name="attrType" selectionBinding="attributeType" value="car"}}
car
</label>
<label>{{view App.RadioButton name="attrType" selectionBinding="attributeType" value="food"}}
food
</label>
<label>{{view App.RadioButton name="attrType" selectionBinding="attributeType" value="hotel"}}
hotel
</label>

你可以添加任意多的单选项，只要name是一致就可以了

 

创建封装组件

最后通过component来把这个单选按钮组封装到一起，方便使用

App.GroupRadioComponent = Ember.Component.extend({
    classNames: ['group-radio-sample'],
    attributeType: null
});

 

现在，你可以用在模板里了

{{group-radio attributeType=newAttributeType}}

你可以通过自定义的参数 attributeType来传递单选钮的值

转载于:https://my.oschina.net/chooli/blog/392976