1

我目前在 a 上使用 customAttribute<th>将列排序添加到表中。

我通过在我的自定义属性 VM 中使用以下内容实现了这一点；

import {bindable, inject, observable, Container, ViewEngine, ViewSlot, bindingMode} from 'aurelia-framework';

@inject(Element, Container, ViewEngine)
export class OrderCustomAttribute {
    @bindable key;
    @bindable @observable orderBy;
    @bindable @observable orderDirection;
    myDirection = false;

    constructor(Element, Container, ViewEngine){
        this.element = Element;
        this.viewEngine = ViewEngine;
        this.container = Container;
    }

    attached() {
        this.viewEngine.loadViewFactory('components/datatable/attributes/order.html').then(factory => {

            const childContainer = this.container.createChild();
            const view = factory.create(childContainer);

            view.bind(this);
            const vs = new ViewSlot(this.element, true);
            vs.add(view);

            this.updateCaret();
        });
    }

    order() {
        if(this.key == this.orderBy) {
            // We're already ordering by this column, so move the order on one;
            if(!this.orderDirection) {
                this.orderDirection = "ASC";
            } else if(this.orderDirection == "ASC") {
                this.orderDirection = "DESC";
            } else {
                this.orderDirection = false;
                this.orderBy = false;
            }
        } else {
            // We're not ordering by this column, so lets start doing so
            this.orderBy = this.key;
            this.orderDirection = "ASC";
        }
    }

    orderByChanged(newValue, oldValue) {
        this.updateCaret();
    }

    orderDirectionChanged(newValue, oldValue) {
        this.updateCaret();
    }

    updateCaret() {
        if(this.key == this.orderBy) {
            this.myDirection = this.orderDirection;
        } else {
            this.myDirection = false;
        }
    }
}

还有我的简单观点；

<template>
    <a class="order__icon" click.delegate="order()">
        <i class="fa fa-caret-down" show.bind="myDirection == 'DESC'"></i>
        <i class="fa fa-caret-up" show.bind="myDirection == 'ASC'"></i>
        <i class="fa fa-caret-up text-muted" show.bind="!myDirection"></i>
    </a>
</template>

我已经编写了简单的逻辑来在单击排序图标时对数据进行排序。

我遇到的问题是我希望整个列标题都是一个链接，而不仅仅是图标。上面的代码将我的 CustomAttribute VM 添加到元素中。有办法吗？

  1. 获取元素的内容（所以，列名）
  2. 在我的视图中使用这些内容
  3. 用我的视图替换元素的内容（而不是将我的视图附加到元素中）
4

0 回答 0