Aurelia：如何绑定自定义元素的textContent？

Question

Aurelia：如何绑定自定义元素的textContent？

4

我正在使用Aurelia编写一个非常简单的数据网格自定义元素，部分原因是为了我需要的功能，部分原因是为了学习Aurelia。进展顺利，但我卡在如何获取自定义组件中元素的内容上。

以下是我的代码，问题的其余部分如下：

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>

在这段代码中，我想要做的是将 <data-grid-column> 元素的 TEXT CONTENT 绑定到 data-grid.js#DataGridColumnCustomElement 中的一个字段。类似于标题、属性和宽度属性都可以正常工作，我想获取元素的文本内容。

看起来我需要在类上定义一些东西才能实现这一点，但我无法确定需要定义什么或者在哪里查找。

提前感谢，

Jason

- Jason von Nieda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeremy Danyow · Accepted Answer

您需要获取列的DOM元素的引用，以便获取textContent。以下是如何执行此操作以及其他一些微调：

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