Question

我想知道Ember是否有一些很好的方法来重组这个烂摊子！

正如你所看到的，我有两个TextField几乎相同的代码！

我讨厌在我的页面中使用相同的代码，我希望你能给我一些提示，以改善我在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', '');
        }
    }
});

Answer 1

我认为创建这样的视图

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', '');
    }
  }
});

让你的其他观点继承它，就像这样

App.DepartureTextField = App.MyOwnTextField.extend({

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

可能会奏效。我不太确定行attributeBindings : ['list'],是否可以放在公共代码中。

Answer 2

试试这个：

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

基本上这不是Ember方式，这是通常的javascript对象扩展方式。

是否有“Ember方式”来共享此代码？

2 个答案: