如何在ember中包含来自控制器的组件 [英] How to include a component from a controller in ember

问题描述

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

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

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

如果有人有更好的方法，我很好奇

远程：

配置对象（在控制器中定义）：

  modelsConfig：{
 getController：function（）{return this; } 
 modelType：'event'，
 add：{
 title：'Add New'，
 path：'events.event'，
 getParams：function控制器）{return {}; 
}，
 editPath：'events.event'，
 deleteIcon：true，
 tableFilter：{
 field：'status'，
 title： '过滤事件：'，
选项：[{
图标：null，
名称：'全部'，
值：null 
}，{
图标：'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'
}，{ 
图标：'check-circle'，
名称：'完成'，
值：'完成'
} 
] 
}，
搜索：{//不确定我们实际需要这个... 
 searchingFields：['orsIncidentIDNumber'，'irsIncidentIDNumber']，
 text：null //默认文本
}，
表：{
 statusIcon：'status'，/ / field的模型来计算
 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 /时间'，
字段：'date',, 
 component：{
 type：'date'，
 value：'date'，
} 
}，{
标题：'地址'，
字段：'地址'，
组件：{
类型：'textarea'，
值：'地址'，
} 
 
 
 
 
 
 
 
 
 
 
 
 
 $ 
值：'address'，
} 
}] 
}，
分页：{
开始：0，
结束：0， 
 perPage：5 
} 
} 
  

表模板： / p>

 < 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> 
<！ - 模型表 - > 
< table> 
< thead> 
< tr> 
 {{#if config.table.statusIcon}} 
< th>状态< / 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}} 
<！ - 包含给定组件 - > 
 {{else}} 
 {{array-value record col.field}}<！ - 只返回记录[col.field}  - > 
 {{/ if}} 
< / td> 
 {{/ each}} 
 {{#if config.editPath}} 
 {{link-to config.editPath record.id tag =tdclass =icon} } 
 {{fa-icon'pencil-square-o'}} 
 {{/ link-to}} 
 {{/ if}} 
 {{#if config .deleteIcon}} 
< td class =icon> 
< a href =＃{{actiondeleteRecordrecord}}> 
 {{fa-icon'trash-o'}} 
< / a> 
< / td> 
 {{/ if}} 
< / tr> 
 {{/ each}} 
< / tbody> 
< / table> 
<！ - 模型操作 - > 
< div class =table-actions> 
 {{#if config.add.title}} 
< button {{actionaddNew}}> {{config.add.title}}< / button> 
 {{/ if}} 
 {{#if config.pagination}} 
 {{pagination-component config = config.pagination actionController = this}} 
 {{/ if }} 
< / div> 
  

实施：

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

解决方案

Ember最近添加了对动态组件的支持。对于一个模型/对象，如：

  [{
 cname：'table'，
 content：{ 
 statusIcon：'status'
} 
}，
 {
 cname：'search'，
 content：{
 text：'foobar '
} 
}] 
  

您可以在模板中执行此操作： / p>

  {{＃每个项目中的对象}} 
 {{component item.cname content = item.content}} 
 {{/ each}} 
  

所以你不必关心你发送什么到模板了。所有您需要做的是确保列表中的每个项目符合 cname 和内容约定。

I'm working on an application in ember and have created a dynamic table component that will take a config object and a list of models then print a row out for each model with the columns specified in the config object.

I would like to extend the component to allow inline editing of the models. My thought would be that you could define what components and params in the config object that tie to each field.

The only way I can think to implement this is to create another component that is basically a switch statement of components building out the one that matches the case.

I'm curious if anyone has a better way to do this?

What I have So Far:

Config Obj (defined in controller):

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
    }
}

Table template:

<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>

Implementation:

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

解决方案

Ember recently added support for dynamic components. For a model/object like:

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

You can do this in a template:

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

So you don't have to care about what you send to the template anymore. All you need to do is make sure that every item in the list complies to the cname and content convention.

这篇关于如何在ember中包含来自控制器的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！