[英]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. 我正在Aurelia写一个非常简单的数据网格自定义元素,部分用于我需要的功能,部分用于学习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 数据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 数据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 数据并网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 数据网的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
. 在这段代码中,我想要做的是将<data-grid-column>
元素的TEXT CONTENT
绑定到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 贾森
You'll need to get a reference to the column's DOM element so you can grab the textContent. 您需要获取对列的DOM元素的引用,以便您可以获取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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.