[EmberJS] Observer для дочерних view

EmberJS

Предположим, что есть несколько Ember.View — MotherView, Child1View, Child2View, Child3View. Первая является родительской для остальных трёх. В коде это так:

App.MotherView = Em.View.extend({
  data: null,
  obj: null
});
 
App.Child1View = App.MotherView.extend({
  obj: {
    field1: 123
  },
  parse: function() {
    var a = someAction(this.get('obj.field1'));
    this.set('data', someAction2(a));
  }.observes('obj.field1')
});
 
App.Child2View = App.MotherView.extend({
  obj: {
    field2: 234
  },
  parse: function() {
    var a = someAction(this.get('obj.field2'));
    this.set('data', someAction2(a));
  }.observes('obj.field2')
});
 
App.Child3View = App.MotherView.extend({
  obj: {
    field3: 345
  },
  parse: function() {
    var a = someAction(this.get('obj.field3'));
    this.set('data', someAction2(a));
  }.observes('obj.field3')
});

Поле obj являет собой уникальный объект (модель, если угодно) для каждой ChildView. Под уникальностю понимается то, что каждая ChildView берет какое-то «свое» поле из obj. Однако, все три ChildView выполняют одинаковую обработку «своего» поля (а так же «observ’ит» его). Задача: необходимо всю логику обработку полей field1, field2, field3 вынести в MotherView.

Реализовать это можно так:

App.MotherView = Em.View.extend({
  data: null,
  obj: null,
  modelField: null,
  didInsertElement: function() {
    this.addObserver('obj.' + this.get('modelField'), this, this.calc);
  },
  calc: function() {
    var field = this.get('modelField');
    var a = someAction(this.get('obj').get(field));
    this.set('data', someAction2(a));
  }
});
 
App.Child1View = App.MotherView.extend({
  obj: {
    field1: 123
  },
  modelField: 'field1',
 
  didInsertElement: function() {
    this._super();
    this.calc();
  }
});
 
App.Child2View = App.MotherView.extend({
  obj: {
    field1: 234
  },
  modelField: 'field2',
 
  didInsertElement: function() {
    this._super();
    this.calc();
  }
});
 
App.Child3View = App.MotherView.extend({
  obj: {
    field1: 345
  },
  modelField: 'field3',
 
  didInsertElement: function() {
    this._super();
    this.calc();
  }
});

Название поля obj сохраняется в отдельном поле СhildView (modelField). В MotherView в didInsertElement вешается обсервер на obj[modelField] в виде метода calc. Этот метод также описан в MotherView и доступен для каждой из ChildView.

В каждой из ChildView необходимо объявить didInsertElement, в котором вызвать this._super и this.calc.

Вот и все.

, ,

Оставить комментарий

Top ↑ | Main page | Back