How would you bind a dynamic value to a dynamic component in Handlebars/EmberJS

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/29802335/how-would-you-bind-a-dynamic-value-to-a-dynamic-component-in-handlebars-emberjs

标签

ember.js

handlebars.js