Question

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

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

关于如何做到这一点的任何想法给出以下内容？

配置对象：

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

路由器型号：

deployment.js（路由器）

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

模板：

deployment.hbs

<h2>Deployments</h2>
        {{table-list
            config=EDConfig
            data=model.escalationDetailModelGroups
        }}

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

我只是输入了我的头脑，最有可能需要调整，但这个想法应该是明确的。

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

1 个答案: