CODEWITHSUNDEEP
javascriptember.jsjavascript-framework
simval
simval

Reputation: 105

Is there an "Ember way" to mutualize this code?

I'd like to know if there are some good ways in Ember to reorganize this mess !

As you can see, i've got two TextField with almost the same code !

I hate having same code in my page and i hoped you could give me some tips to improve my style of programming in Ember.

var App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({});

App.StationsDepController = Ember.ArrayController.create();
App.StationsArrController = Ember.ArrayController.create();
App.ResultsController = Ember.ArrayController.create();

App.DepartureTextValue = Em.Object.create({
    value: ''
});

App.ArrivalTextValue = Em.Object.create({
    value: ''
});

App.DepartureTextField = Em.TextField.extend({
    attributeBindings: ['list'],
    list: 'datalistDep',
    valueBinding: 'App.DepartureTextValue.value',
    textValue: App.DepartureTextValue,
    placeholder: 'Departure',
    arrayCtrl: App.StationsDepController,
    keyUp: function(e) {
        var that = this;
        if (this.textValue.get('value') != '') {
            $.get('/metier/services/rest/StationSI/Stations?letters=' + this.textValue.value, function(data) {
                that.arrayCtrl.set('content', data);
            });
        } else {
            this.arrayCtrl.set('content', '');
        }
    }
});

App.ArrivalTextField = Em.TextField.extend({
    attributeBindings: ['list'],
    list: 'datalistArr',
    valueBinding: 'App.ArrivalTextValue.value',
    textValue: App.ArrivalTextValue,
    placeholder: 'Arrival',
    arrayCtrl: App.StationsArrController,
    keyUp: function(e) {
        var that = this;
        if (this.textValue.get('value') != '') {
            $.get('/metier/services/rest/StationSI/Stations?letters=' + this.textValue.value, function(data) {
                that.arrayCtrl.set('content', data);
            });
        } else {
            this.arrayCtrl.set('content', '');
        }
    }
});

Upvotes: 0

Views: 84

Answers (2)

Finn MacCool
Finn MacCool

Reputation: 808

i think creating a view like this

App.MyOwnTextField = Em.TextField.extend({

  attributeBindings : ['list'],
  keyUp : function(e) {
    var that = this;
    if (this.textValue.get('value') != '') {
        $.get('/metier/services/rest/StationSI/Stations?letters='+ this.textValue.value, function(data) {
            that.arrayCtrl.set('content', data);
        });
    } else {
        this.arrayCtrl.set('content', '');
    }
  }
});

and having your other views inherit from it like so

App.DepartureTextField = App.MyOwnTextField.extend({

  list : 'datalistDep',
  valueBinding : 'App.DepartureTextValue.value',
  textValue : App.DepartureTextValue,
  placeholder : 'Departure',
  arrayCtrl : App.StationsDepController
});

might work. i'm not quite sure if the line attributeBindings : ['list'], can be put in the common code, though.

Upvotes: 1

dfsq
dfsq

Reputation: 193261

Try this:

App.ArrivalTextField = App.DepartureTextField.extend({
    list: 'datalistArr',
    valueBinding: 'App.ArrivalTextValue.value',
    textValue: App.ArrivalTextValue,
    placeholder: 'Arrival',
    arrayCtrl: App.StationsArrController
});

Basically this is not Ember way, this is usual javascript object extending way.

Upvotes: 0

Related Questions