Question

我正在使用ember中的应用程序，并创建了一个动态表组件，该组件将获取配置对象和模型列表，然后为每个模型打印一行，并使用config对象中指定的列。< / p>

我想扩展组件以允许内联编辑模型。我的想法是你可以定义配置对象中哪些组件和参数绑定到每个字段。

我能想到实现这一点的唯一方法是创建另一个组件，该组件基本上是组件的switch语句，构建与案例匹配的组件。

我很好奇是否有人有更好的方法来做到这一点？

我到目前为止：

Config 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约定。

如何在ember中包含控制器中的组件

1 个答案: