Ember-light-table : how to I create a <a HREF={val1}><{va2}</>

1

HI,

I’m relatively new to ember and found the light-table add-on which seems to be able to do all I need. I managed to bring back data from a DB and display it, so the fundamentals seem right. What I would like to do is to display 1 column as a link to another site and have that open in another window/tab when I select it (i.e. target=_blank). However I’m struggeling how to do that , all I get is the regular columnar representation of the values defined in my model

{{#t.body canSelect=false onScrolledToBottom=(action ‘onScrolledToBottom’) as |body| }} {{#if isLoading}} {{#body.loader}} {{table-loader}} {{/body.loader}} {{/if}} {{/t.body}}

is what my by section in the template looks like. Can anyone please provide me with some insight how to accomplish what I 'm trying to get . at?

Thanks

Stefan

2

Hi @vim and welcome!

Are you able to provide a condensed example in a public URL containing your application code?

Be sure to use double braces when accessing values:

<a href="{{val1}}" target="_blank">{{val2}}</a>

Also, you can use {{log val1}} or {{debugger}} in your templates to explore what goes on when it renders. The docs have some more info on those helpers.

3

so I expressed myself probably poorly

this is what I have in my template (among other stuff, obvioulsy)

{{#t.body
    canSelect=false
    onScrolledToBottom=(action 'onScrolledToBottom')
    as |body|
  }}
   <a href="http://emberjs.com">{{body.title}}</a>
    {{#if isLoading}}
      {{#body.loader}}
        {{table-loader}}
      {{/body.loader}}
    {{/if}}
  {{/t.body}}

two things happen:

  1. when I use - as above {{body.title}} to show the title I retrieve from the model, nothing is shown (however, the is inserted, I can see that in DevTools.
  2. The insertion of the is after each row. what I would like, however, is that it is say the first column od each row, so inside, not after
4

From what I know of ember-light-table it won’t copy properties you pass in. You could try {{this.model.title}} if the snippet above exists in a route template. I checked their API docs quickly too.

For the 2nd point, you may need to use a custom row component. There is a simple example in their cookbook demo.

5

I’ll have a deeper look at the demo, but it seems that this is return just styles etc, not new fields

{{this.model.title}} does not return any content, unfortunataly.

6

Huh, interesting. {{this.model.title}} makes a few assumptions about where that snippet is invoked. Are you able to share the entire file(s)?

7

sorry, i’m a little late here. have you tried making and specifying a custom cell component? the API docs can be found at https://offirgolan.github.io/ember-light-table/docs/classes/Column.html#property_cellComponent

but there’s a more helpful example within the blueprints https://offirgolan.github.io/ember-light-table/#/cookbook/custom-row

once you click the </> button look for the user-avatar examples.