使用ember-models-table中的模板

我正在使用ember-models-table（https://github.com/onechiporenko/ember-models-table），我想自定义表格单元格的输出。正如文档所建议的，我尝试将模板和组件分配给列定义中的列。使用ember-models-table中的模板

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    columnDefs 
    { 
     "propertyName": "id", 
     "title": "ID", 
    }, 
    { 
     "propertyName": "name", 
     "title": "Name", 
    }, 
    { 
     "propertyName": "postTypeId", 
     "title": "Post Type", 
     "template": "ember-models-table/column/enumType", // can be template or component 
    } 
});

所以我说的不是灰烬的模型表组件，但关于自定义模板/可分配到特定的列在第3列在我的代码snipplet可见组件。尽管看起来对于模板只有一个记录参考被传递，但文档（http://onechiporenko.github.io/ember-models-table/#/examples）表示对于组件，表，列，记录和数据引用已通过，但我需要的是

a）我在控制器中的columnDefs中定义了特定的值（或模型属性）（这是因为我想用这个模板/组件具有许多模型和不同的属性名称，所以我无法在模板/组件中硬编码属性名称）

b）将任意数据传递给列组件的能力（在这里我只是谈论组件，因为它似乎有可能用组件传递某些数据属性，但我无法弄清楚如何这样做）

希望我的问题越来越清晰，并希望每一个建议。

P.S如果有更好的方式来格式化表格单元格内的输出（例如通过某种方式将帮助器分配给单元格的值），请告诉我。

来源

2017-05-03 Mannimalte

如果你的场景需要模板太多，你最好查找[ember-contextual-table]（https://tubitak-bilgem-yte.github.io/ember-contextual-table/#/cell-customization） – ykaragol

@Mannimalte还没有我提供的答案帮助你呢？ – alptugd

绝对，它有！我最后一天根本就没有解决这个问题。非常感谢你。 – Mannimalte

我可能误解了你的情况;但请看看我在此twiddle中创建的虚拟应用程序。我在自定义组件（my-component）和名为tableWideCustomProperty至models-table的表宽自定义属性的列定义中通过了my-custom-property-for-component。因为列定义与名称column到自定义组件通过column.my-custom-property-for-component：

可以按如下方式检索my-component中的这些属性：

检索my-custom-property-for-component。

正在检索tableWideCustomProperty：table.tableWideCustomProperty，因为models-table本身以名称table传递到自定义组件。

正如你所看到的，你有列定义中定义的自定义组件内访问table，record，data和column属性。

来源

2017-05-05 12:45:33 alptugd

非常感谢你 - 特别是对于旋转。这是展示事物如何运作的最佳方式！ – Mannimalte

虽然我可能不会100％理解您的使用案例，但我假设在您的路线上呈现表格。一种方法是在控制器属性上定义列定义并将其与模型一起传递给组件。

应用程序/控制器/ person.js

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
columnDefs: [ 
    { 
     "propertyName": "id", 
     "title": "ID" 
    }, 
    { 
     "propertyName": "firstName", 
     "title": "First Name" 
    }, 
    { 
     "propertyName": "lastName", 
     "title": "Last Name" 
    }] 
});

应用程序/模型/ person.js

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    firstName:  DS.attr('string'), 
    lastName:  DS.attr('string') 
});

应用程序/路由/ person.js

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model() { 
    return this.store.findAll('person'); 
    } 
})

应用/模板/ person.hbs

{{models-table 
     data=model 
     columns=columnDefs}}

您可以根据需要将任何选项（template，sortedBy等）添加到对象中。

来源

2017-05-04 02:31:43 gmart

感谢您的帮助，但您所描述的是我已经在做的事情。很明显，我确实清楚了我想要做的事情。所以我更新了我的问题，以便更加精确。 – Mannimalte

使用ember-models-table中的模板

回答

相关问题