且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间: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.