CODEWITHSUNDEEP
javascriptaurelia
Jason von Nieda
Jason von Nieda

Reputation: 113

Aurelia: Binding textContent of a custom element?

I'm writing a very simple data grid custom element in Aurelia, partially for a feature I need and partially to learn Aurelia. It's going well but I'm stuck on how to get the content of an element in the custom component.

Here is my code, with the remainder of the question below:

data-grid.js

import {inject, bindable} from 'aurelia-framework';
import _ from 'underscore';

export class DataGridCustomElement {
  @bindable data = [];
  @bindable height = '';

  columns = [];

  bind() {
    this.sort(this.columns[0].property);
  }

  sort(property) {
    if (property == this.sortProperty) {
      this.sortDirection = !this.sortDirection;
    }
    else {
      this.sortProperty = property;
      this.sortDirection = true;
    }
    let data = _.sortBy(this.data, this.sortProperty);
    if (!this.sortDirection) {
      data = data.reverse()
    }
    this.data = data;
  }
}

@inject(DataGridCustomElement)
export class DataGridColumnCustomElement {
  @bindable title = '';
  @bindable width = '';
  @bindable property = '';

  constructor(dataGrid) {
    dataGrid.columns.push(this);
  }
}

data-grid.html

<template>
  <table class="table table-fixedheader table-condensed table-striped table-bordered">
    <thead>
    <tr>
      <th repeat.for="column of columns" width="${column.width}"><a href="#" click.delegate="sort(column.property)">${column.title}</a></th>
    </tr>
    </thead>
    <tbody css="height: ${height};">
    <tr repeat.for="row of data">
      <td repeat.for="column of columns" width="${column.width}"></td>
    </tr>
    </tbody>
  </table>
</template>

data-grid-test.js

import {inject} from 'aurelia-framework';

export class DataGridTest {
  constructor() {
    this.animals = [
      {
        id : 3,
        animal : 'Horse',
        home : 'Stall'
      },
      {
        id : 1,
        animal : 'Monkey',
        home : 'Tree'
      },
      {
        id : 11,
        animal : 'Dog',
        home : 'House'
      },
      {
        id : 2,
        animal : 'Cat',
        home : 'Internet'
      },
      {
        id : 20,
        animal : 'Hamster',
        home : 'Cage'
      },
    ];
  }
}

data-grid-test.html

<template>
  <require from="./data-grid"></require>
  <data-grid data.bind="animals" height="300px">
    <data-grid-column title="ID" property="id" width="34%">TEXT CONTENT</data-grid-column>
    <data-grid-column title="Animal" property="animal" width="33%">TEXT CONTENT</data-grid-column>
    <data-grid-column title="Home" property="home" width="33%">TEXT CONTENT</data-grid-column>
  </data-grid>
</template>

In this code what I want to do is bind TEXT CONTENT of the <data-grid-column> elements to a field in data-grid.js#DataGridColumnCustomElement. Similarly to the title, property and width attributes which all work fine, I want the text content of the element.

It seems as if I would need to define something on the class for this to happen, but I cannot figure out what to define or where to look.

Thanks in advance,

Jason

Upvotes: 4

Views: 1289

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

You'll need to get a reference to the column's DOM element so you can grab the textContent. Here's how to do that, along with some other tweaks:

import {processContent, noView} from 'aurelia-framework';

@noView()  // this element doesn't need a view, it's essentially declarative data for the parent element
@processContent(false) // the templating engine doesn't need to process the content of this element, we're going to do it
@inject(DataGridCustomElement, Element) // inject the parent, and the DOM element that represents this DataGridColumn element so we can read it's textContent
export class DataGridColumnCustomElement {
  @bindable title = '';
  @bindable width = '';
  @bindable property = '';
  textContent = '';

  constructor(dataGrid, element) {
    this.textContent = element.textContent; // grab the textContent and store it in a class property
    dataGrid.columns.push(this);
  }
}

Upvotes: 6

Related Questions