Permalink
Browse files

Create UnboundSelect to make date *a lot* faster

  • Loading branch information...
1 parent 6563300 commit 28ef90e7f40398d90fb6295d294d75a59e51eb6d @josepjaume josepjaume committed Jun 13, 2012
@@ -0,0 +1 @@
+require('ember-forms/controls/unbound_select');
@@ -0,0 +1,45 @@
+var fmt = Ember.String.fmt;
+
+EF.UnboundSelect = Ember.View.extend({
+ tagName: 'select',
+ template: Ember.Handlebars.compile("{{unbound view.options}}"),
+
+ options: Ember.computed(function(){
+ var output;
+ if(!Ember.empty(this.get('prompt'))){
+ output = '<option value="">' + this.get('prompt') + '</option>';
+ }
+ this.get('content').forEach(function(item){
+ var value, label;
+ if(!Ember.empty(item.value)){
+ value = item.value;
+ label = item.label;
+ }else{ value = item; label = item; }
+ var selected = "";
+ if(value === this.get('value')){
+ selected = ' selected="selected"';
+ }
+ output += fmt('<option value="' + value + '"' + selected + '>' + label + '</option>');
+ }, this);
+ return (new Handlebars.SafeString(output));
+ }).property('value'),
+
+ setValue: Ember.observer(function(){
+ var value = this.get('value');
+ var option = this.$('option[value=' + value + ']');
+ option.siblings().attr('selected', null);
+ option.attr('selected', 'selected');
+ }, 'value'),
+
+ didInsertElement: function(){
+ var view = this;
+ this.$().change(function(){
+ view.change();
+ });
+ },
+
+ change: function(){
+ var value = this.$().val();
+ this.set('value', value);
+ }
+});
@@ -1,4 +1,5 @@
require("ember-forms/fields/base");
+require("ember-forms/controls/unbound_select");
var e = Ember.empty;
@@ -25,7 +26,7 @@ EF.DateComponent = Ember.ContainerView.extend({
return value;
}).volatile(),
- dayView: Ember.Select.extend({
+ dayView: EF.UnboundSelect.extend({
attributeBindings: ['name'],
name: Ember.computed(function(){
return this.getPath('parentView').get('name') + '_day';
@@ -40,9 +41,7 @@ EF.DateComponent = Ember.ContainerView.extend({
}).cacheable()
}),
- monthView: Ember.Select.extend({
- optionLabelPath: 'content.name',
- optionValuePath: 'content.id',
+ monthView: EF.UnboundSelect.extend({
prompt: "- Month -",
attributeBindings: ['name'],
name: Ember.computed(function(){
@@ -52,13 +51,13 @@ EF.DateComponent = Ember.ContainerView.extend({
var months = Ember.A(["January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November",
"December"]);
- return Ember.A(months.map(function(month, index){
- return {id: (index + ''), name: month};
- }));
+ return months.map(function(month, index){
+ return {value: (index + ''), label: month};
+ });
}).cacheable()
}),
- yearView: Ember.Select.extend({
+ yearView: EF.UnboundSelect.extend({
prompt: "- Year -",
attributeBindings: ['name'],
name: Ember.computed(function(){
@@ -1,4 +1,5 @@
require("ember-forms/core");
+require("ember-forms/controls");
require("ember-forms/fields");
require("ember-forms/form");
require("ember-forms/helpers");
@@ -0,0 +1,20 @@
+test("adds the proper options to an unbound select", function(){
+
+ var unboundSelect = EF.UnboundSelect.create({
+ prompt: 'Hola',
+ content: [1, 2, 3]
+ });
+
+ Ember.run(function(){
+ unboundSelect.appendTo("#qunit-fixture");
+ unboundSelect.set('value', 2);
+ });
+
+ equal(unboundSelect.$("option").length, 4, "renders three options");
+ var selectedOption = unboundSelect.$("option[selected]");
+ equal(selectedOption.text(), "2", "it selects an element");
+
+ Ember.run(function(){
+ unboundSelect.destroy();
+ });
+});

0 comments on commit 28ef90e

Please sign in to comment.