我在ember.js中的哪里計算樣式字符串？

Question

我有一個ember.js應用

var App = Ember.Application.create({
  LOG_TRANSITIONS: true
});
App.ApplicationAdapter = DS.FixtureAdapter;

//==============================ROUTER==============================

App.Router.map(function() {
  this.resource('organisation', {path: '/:org_slug/:org_id'}, function () {
    this.resource('building', {path: '/:hall_slug/:hall_id'});
    this.resource('group', {path: '/:grp_slug/:grp_id'});
  });
});

我無法弄清楚如何從復雜的燈具數據中巧妙地計算出東西。 我的模型包括一個包含建築物和建築物組的組織。

//==============================MODELS==============================

App.Organisation = DS.Model.extend({
  name: DS.attr('string'),
  buildings: DS.hasMany('building', {async: true}),
  groups: DS.hasMany('group', {async: true})
});

App.Building = DS.Model.extend({
  organisation: DS.belongsTo('organisation'),
  name: DS.attr('string'),
  value: DS.attr('number'),
  groups: DS.hasMany('group', {async: true})
});

App.Group = DS.Model.extend({
  organisation: DS.belongsTo('organisation'),
  buildings: DS.hasMany('building', {async: true}),
  name: DS.attr('string'),
  start: DS.attr('date'),
  end: DS.attr('date'),
  main: DS.attr('boolean'),
  value_range: function() {
    var maximum = 0.0;
    var minimum = 0.0;
    this.get('buildings').forEach(function(building) {
      var v = building.get('value');
      maximum = Math.max(maximum, v);
      minimum = Math.min(minimum, v);
    });
    return {'maximum': maximum, 'minimum': minimum};
  }.property('buildings.@each.value')
});

我需要像value_range函數中那樣基於整個建築組來計算東西。 這似乎很好。

我有這些裝置

//==============================FIXTURES==============================

App.Organisation.FIXTURES = [
  { id: 1, name: 'Organisation 1', buildings: [1,2,3,4,5,6,7,8,9,10], groups: [1, 2, 4]},
  { id: 2, name: 'Organisation 2', buildings: [11,12,13,14,15,16], groups: [3]}
];


App.Building.FIXTURES = [
  { id: 1, name: 'Building 1', value: -3.2, groups: [1], organisation_id: 1},
  { id: 2, name: 'Building 2', value: 23.2, groups: [1,2], organisation_id: 1},
  { id: 3, name: 'Building 3', value: 34.2, groups: [1,2], organisation_id: 1},
  { id: 4, name: 'Building 4', value: -3.12, groups: [2], organisation_id: 1},
  { id: 5, name: 'Building 5', value: 0.12, groups: [3], organisation_id: 2},
  { id: 6, name: 'Building 6', value: 0.2, groups: [3], organisation_id: 2}
];


App.Group.FIXTURES = [
  {id: 1, organisation_id: 1, name: 'Group 1', buildings: [1,2,3], main: true},
  {id: 2, organisation_id: 1, name: 'Group 2', buildings: [2,3,4], main: false},
  {id: 3, organisation_id: 2, name: 'Group 3', buildings: [5,6], main: true},
];

而且我設法為組織創建了一個路由，並為索引路由創建了顯示默認（“主”）組的索引。

//==============================ROUTES==============================
App.OrganisationRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('organisation', params.org_id);
  },
  serialize: function(model) {//add prefix to slug and id
    return {
      org_slug: model.get('slug'),
      org_id: model.get('id')
    };
  }
});
App.OrganisationIndexRoute = Ember.Route.extend({
  model: function(params) {
    //get buildings from the main group
    return this.modelFor('organisation').get('groups').then(function(grps) {
      return grps.findBy('main', true).get('buildings');
    });
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('organisation', this.modelFor('organisation'));
    var mygroup = this.modelFor('organisation').get('groups').then(function(grps) {
      controller.set('group', grps.findBy('main', true));    
    });
  }
});

我想展示一個簡單的欄，其樣式為組中每個建築物的計算值（左/右和寬度值）。 該計算使用group.value_range數據以及building.value數據。 我的問題是我無法弄清楚該函數的位置。 控制器似乎無法訪問各個建築物。

我是否使用車把幫手？ 我已經一起破解了，但是聞起來了。

Ember.Handlebars.helper('thing', function(building, group) {
  var range = group.get('value_range');
  var value = building.get('value');
  var width = Math.abs(value)/(range.maximum - range.minimum) * 100;
  var zero_position = Math.abs(range.minimum)/(range.maximum - range.minimum) * 100;
  if (value >= 0) {
    left_or_right = 'left';
    myclass = 'pos';
  } else {
    left_or_right = 'right';
    myclass = 'neg';
    zero_position = 100 - zero_position;
  }
  return new Handlebars.SafeString(
    '<div class="my-bar ' + myclass + '" style="width: ' + width + '%; ' + left_or_right + ': ' + zero_position + '%;">-</div>'
  );
});

還是我需要一個視圖？ 文檔說視圖主要用於事件處理。

我在這個問題上還不太了解。 有人可以幫忙嗎？

Answer 1

這是一種更慣用的方法。 我只是翻譯了您的示例，沒有對此進行測試。 但是它應該給您足夠的輪廓以使其起作用：

App.RangeBar = Ember.Component.extend({
  classNames: ['my-bar'],
  classNameBindings: ['direction'],
  attributeBindings: ['style'],

  direction: function(){
    if (this.get('value') >= 0) {
      return 'pos';
    } else {
      return 'neg';
    }
  }.property('value'),

  width: function(){
    return Math.abs(this.get('value'))/(this.get('max') - this.get('min')) * 100;
  }.property('value', 'max', 'min'),

  zeroPosition: function(){
    return Math.abs(this.get('min'))/(this.get('max') - this.get('min')) * 100;
  }.property('min', 'max'),

  style: function(){
    var styles = [
      ['width', this.get('width') + '%']
    ];
    if (this.get('direction') === 'pos') {
      styles.push(['left', this.get('zeroPosition') + '%']);
    } else {
      styles.push(['right', (100 - this.get('zeroPosition')) + '%']);
    }
    return styles.map(function(style){return style[0] + ":" + style[1];}).join(";");
  }.property('width', 'zeroPosition', 'direction')

});

從您的模板中使用它，例如：

{{range-bar max=group.value_range.maximum min=group.value_range.minimum value=building.value}}