如何从包括在烬控制器组件(How to include a component from a con

我工作在灰烬的应用程序，创造了将配置对象和模型列表，然后打印出一行与在配置对象中指定的列每个模型动态表格组件。

我想延长组件，让模型的内联编辑。 我的想法是，你可以在绑定到每个字段的配置对象定义什么成分，而params。

我能想到的实现这一点的唯一方法是创建一个组件时，基本上是构建出的情况相匹配的部件的switch语句。

我很好奇，如果任何人有更好的方式来做到这一点？

我到目前为止有：

配置的OBJ（在控制器中定义）：

modelsConfig: {
    getController: function() { return this; },
    modelType: 'event',
    add: {
        title: 'Add New',
        path: 'events.event',
        getParams: function(controller) { return {}; }
    },
    editPath: 'events.event',
    deleteIcon: true,
    tableFilter: {
        field: 'status',
        title: 'Filter Events:',
        options: [{
                icon: null,
                name: 'All',
                value: null
            }, {
                icon: 'circle-o',
                name: 'New',
                value: 'new'
            }, {
                icon: 'dot-circle-o',
                name: 'Closed',
                value: 'closed'
            }, {
                icon: 'circle',
                name: 'In Review',
                value: 'review'
            }, {
                icon: 'times-circle',
                name: 'Assigend Edits',
                value: 'assigned'
            }, {
                icon: 'check-circle',
                name: 'Complete',
                value: 'complete'
            }
        ]
    },
    search: { //Not sure we actually need this...
        searchedFields: ['orsIncidentIDNumber', 'irsIncidentIDNumber'],
        text: null //Default text
    },
    table: {
        statusIcon: 'status',//field of model to calculate the icon off of
        cols: [{
            header: 'ORS Indident ID #',
            field: 'orsIncidentIDNumber',
            component: {
                type: 'text',
                value: 'orsIncidentIDNumber',
            }
        },{
            header: 'IRS Indident ID #',
            field: 'irsIncidentIDNumber',
            component: {
                type: 'text',
                value: 'irsIncidentIDNumber',
            }
        },{
            header: 'Date/Time',
            field: 'date',,
            component: {
                type: 'date',
                value: 'date',
            }
        },{
            header: 'Address',
            field: 'address',
            component: {
                type: 'textarea',
                value: 'address',
            }
        },{
            header: 'Type',
            field: 'type',
            component: {
                type: 'select',
                store: typeStore,
                value: 'address',
            }
        }]
    },
    pagination: {
        start: 0,
        end: 0,
        perPage: 5
    }
}

表模板：

<div class="table-actions clearfix">
    {{#if config.tableFilter}}
        {{table-filters config=config.tableFilter filter="filterModels"}}
    {{/if}}
    {{#if config.search}}
        {{search-bar controllerSearchText=config.search.text search="searchModels"}}
    {{/if}}
</div>
<!-- Models table -->
<table>
    <thead>
        <tr>
            {{#if config.table.statusIcon}}
                <th>Status</th>
            {{/if}}
            {{#each col in config.table.cols}}
                <th>{{col.header}}</th>
            {{/each}}
            {{#if config.editPath}}
                <th>&nbsp;</th>
            {{/if}}
            {{#if config.deleteIcon}}
                <th>&nbsp;</th>
            {{/if}}
        </tr>
    </thead>
    <tbody>
        {{#each record in modelRange}}
        <tr>
            {{#if config.table.statusIcon}}
                <td>
                    {{{status-icon record config.table.statusIcon}}}
                </td>
            {{/if}}
            {{#each col in config.table.cols}}
            <td>
                {{#if col.component}}
                     <!-- include given component -->
                {{else}}
                     {{array-value record col.field }}<!-- Just returns record[col.field} -->
                {{/if}}
            </td>
            {{/each}}
            {{#if config.editPath}}
                {{#link-to config.editPath record.id tag="td" class="icon"}}
                    {{fa-icon 'pencil-square-o'}}
                {{/link-to}}
            {{/if}}
            {{#if config.deleteIcon}}
                <td class="icon">
                    <a href="#" {{action "deleteRecord" record}}>
                        {{fa-icon 'trash-o'}}
                    </a>
                </td>
            {{/if}}
        </tr>
        {{/each}}
    </tbody>
</table>
<!-- Models actions -->
<div class="table-actions">
    {{#if config.add.title}}
        <button {{action "addNew"}}>{{config.add.title}}</button>
    {{/if}}
    {{#if config.pagination}}
        {{pagination-component config=config.pagination actionController=this}}
    {{/if}}
</div>

执行：

{{table-list config=modelsConfig data=model}}

Answer 1:

Ember公司最近增加了对动态组件的支持。 对于模型/对象像：

[{
   cname: 'table',
   content: {
     statusIcon: 'status'
   }
 },
 {
   cname: 'search',
   content: {
     text: 'foobar'
   }
 }]

您可以在模板中做到这一点：

{{#each item in object}}
   {{component item.cname content=item.content}}
{{/each}}

所以，你不必在意你送什么给模板了。 所有你需要做的是确保列表中的每一项规定的cname和content约定。

文章来源: How to include a component from a controller in ember