ember.js - How would you bind a dynamic value to a dynamic component in Handlebars/EmberJS -
i'm creating dynamic table component (one row per model), include components dynamically (one column each object in config, each object relates key in model).
i'm trying bind model key dynamic model.
any ideas on how given 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 wont work } },{ header: 'most complex alarm level', field: 'mostcomplexalarmleveldispatched', cname: 'form-input-text', content: { value: model.escalationtime //obviously 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 trying merge/link data, doesn't seem important.
i don't think necessary pass 2 data sources table-list
, relationships between config , model not should doing in templates. more of data-decoration process , type of thing should done @ controller level.
how like:
// controller tablerows: function() { var config = this.get('config'); var model = this.get('model'); config.foreach(function(col) { // give each col model reference }); return config; }.property('config', 'model') // template {{table-list data=tablerows}}
i typed off top of head, tweaks needed likely, idea should clear.
Comments
Post a Comment