我在哪里计算烬.js我的风格字符串
Where do I calculate my style strings in ember.js?
我有一个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},
];
我已经成功地为一个组织创建了一个路由和一个索引路由,它应该显示默认('main')组。
//==============================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>'
);
});
还是我需要一个视图?文档说视图主要用于事件处理。
我不太明白这是怎么回事。有人能帮忙吗?
这里有一种更习惯的方法。我只是翻译了你的例子,我没有测试这个。但它应该给你足够的大纲,使它工作:
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}}
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 可以't让我的if语句处理js中的html表单输入
- 我的单元测试选项是什么
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 我的职位回报太快了,如何做出承诺
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何识别我的网站中的慢速设备
- 如何将JSON数据导入我的ejs模板
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 知道为什么我的旋转木马不会自动更改图片吗
- 我的模板未被解析
- 无法将数据从firebase获取到我的html页面
- CKEditor-我在editor.css中的风格是't
- JavaScript风格:我应该将这些东西中的哪些作为参数传递给我的命名空间函数
- 我想知道如何改变特定灯光的风格.在一个特定的
- 通过javascript
- 无法用Javascript改变我网站的风格
- TypeError: $(. .).风格没有定义——bug或者我的错
- 我在哪里计算烬.js我的风格字符串
- 寻找Windows 8地铁风格的应用程序日历控制在我的应用程序中使用
- 我怎么能传递一个参数到一个函数来获得当前的风格