更新时间:2022-10-21 08:26:00
我还不确定你是如何尝试合并/链接数据,但我似乎并不重要。
我不认为有必要将两个数据源传递给您的 table-list
,配置和模型之间的关系不是你应该在模板中做的。它的更多的数据装饰过程和这种类型的事情应该在控制器级别完成。
如何如下:
//控制器
tableRows:function(){
var config = this.get('config');
var model = this.get('model');
config.forEach(function(col){
//给每个col一个模型引用
});
return config;
} .property('config','model')
// template
{{table-list data = tableRows}}
我刚刚输入了我的头顶,最有可能需要进行调整,但这个想法应该是清楚的。
I'm creating a dynamic table component (one row per model), that will include components dynamically (one column for each object in config, each object relates to a key in a model).
I'm trying to bind the model key to the dynamic model.
Any ideas on how to do that given the following?
Config object:
deployment.js (controller)
EDConfig: {
controller: this,
modelType: 'EscalationDetailModelGroup',
table: {
cols: [{
header: 'Escalation Time',
cname: 'form-input-text',
content: {
value: model.escalationTime //obviously this wont work
}
},{
header: 'Most Complex Alarm Level',
field: 'mostComplexAlarmLevelDispatched',
cname: 'form-input-text',
content: {
value: model.escalationTime //obviously this wont work
}
}]
}
};
Router Model:
deployment.js (router)
modelRange: [{
id: 1,
escalationTime: '3 hours',
mostComplexAlarmLevelDispatched: 'N/A'
}, {
id: 2,
escalationTime: '45 minutes',
mostComplexAlarmLevelDispatched: 'Level 3'
}]
Templates:
deployment.hbs
<h2>Deployments</h2>
{{table-list
config=EDConfig
data=model.escalationDetailModelGroups
}}
table-list.hbs
<table>
<thead>
<tr>
{{#each col in config.table.cols}}
<th>{{col.header}}</th>
{{/each}}
</tr>
</thead>
<tbody>
{{#each record in modelRange}}
<tr>
{{#each col in config.table.cols}}
<td>
{{component col.cname content=col.content}}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
I'm still not sure how are you trying to merge/link the data, but I doesn't seem to be really important.
I don't think its necessary to pass two data sources to your table-list
, the relationships between config and model are not something that you should be doing in the templates. Its more of a data-decoration process and that type of thing should be done at the controller level.
How about something like:
// controller
tableRows: function() {
var config = this.get('config');
var model = this.get('model');
config.forEach(function(col) {
// give each col a model reference
});
return config;
}.property('config', 'model')
// template
{{table-list data=tableRows}}
I just typed that off the top of my head, tweaks would be needed most likely, but the idea should be clear.