ember.js - How to add a custom cell-template to Ember-Table table -
in past i've used vanilla handlebars template create table links other templates so.
<tbody> {{#each}} <tr> <th> {{#link-to 'entities.entity' actorid}}{{/link-to}} </th> {{#each alsoknownas}} <td> {{this}} </td> {{/each}} </tr> {{/each}} </tbody>
using ember-table
framework i've refactored template
<div style="height: 800px;width: 100%;"> {{table-component hasfooter=false enablecontentselection=true columns=columns content=controller}} </div>
my controller looks
entitiescontroller = ember.arraycontroller.extend sortascending: true sortproperties: ['displayname'] profile_link: 'entities/profile_link' columns: ember.computed -> aka = ember.table.columndefinition.create columnwidth: 750 headercellname: 'also known as' textalign: 'text-align-left' getcellcontent: (row) -> row['alsoknownas'].join(', ') displayname = ember.table.columndefinition.create columnwidth: 200 headercellname: 'entity name' textalign: 'text-align-left' tablecellviewclass: 'profile_link' getcellcontent: (row) -> row['displayname'] [displayname, aka]
and custom template entities/profile_link
<th>{{#link-to 'entities.entity' actorid}}{{/link-to}}</th>
how setup controller when click on cell in 'entity name' column links custom template?
instead of tablecellviewclass: 'profile_link'
you can define template inline:
tablecellviewclass: ember.table.tablecell.extend template: em.handlebars.compile """ {{#link-to 'entities.entity' view.cellcontent}} {{view.cellcontent}} {{/link-to}} """
Comments
Post a Comment