您如何将动态值绑定到 Handlebars/EmberJS 中的动态组件

Question

我正在创建一个动态表组件（每个模型一行），它将动态包含组件（配置中的每个对象一列，每个对象与模型中的一个键相关）。

我正在尝试将模型键绑定到动态模型。

对于如何做到这一点有什么想法吗？

配置对象：

deployment.js（控制器）

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
            }
        }]
    }
};

路由器型号：

deployment.js（路由器）

modelRange: [{
    id: 1,
    escalationTime: '3 hours',
    mostComplexAlarmLevelDispatched: 'N/A'
}, {
    id: 2,
    escalationTime: '45 minutes',
    mostComplexAlarmLevelDispatched: 'Level 3'
}]

模板：

部署.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>

Answer 1

我仍然不确定你是如何尝试合并/链接数据的，但我似乎并不重要。

我认为没有必要将两个数据源传递给您的table-list，配置和模型之间的关系不是您应该在模板中做的事情。它更多的是一个数据修饰过程，这种类型的事情应该在控制器级别完成。

比如：

// 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}}

我只是在脑海中输入了这个，很可能需要进行调整，但想法应该很清楚。