如何将动态值绑定到Handlebars / EmberJS中的动态组件 [英] How would you bind a dynamic value to a dynamic component in Handlebars/EmberJS

问题描述

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

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

有关如何执行以下操作的任何想法？ p>

配置对象：

deployment.js（控制器）

  EDConfig：{
 controller：this，
 modelType：'EscalationDetailModelGroup'，
 table：{
 cols：[{
 header：'Escalation Time'，
 cname：'form-input-text'，
 content：{
 value：model.escalationTime //显然这个wont工作
} 
}，{
标题：'最复杂的警报级别'，
字段：'mostComplexAlarmLevelDispatched'，
 cname：'form-input-text' 
内容：{
 value：model.escalationTime //显然这不工作
} 
}] 
} 
}; 
  

路由器型号：

deployment.js（路由器）

  modelRange：[{
 id：1，
升级时间：'3小时'，
 mostComplexAlarmLevelDispatched：'N / A'
}，{
 id：2，
 escalationTime：'45分钟'，
 mostComplexAlarmLevelDispatched： '3级'
}] 
  

模板： p>

deployment.hbs

 < h2>部署< / 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> 
  

解决方案

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

我不认为有必要将两个数据源传递给您的 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.

这篇关于如何将动态值绑定到Handlebars / EmberJS中的动态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！