Question

我目前正在<th>上使用customAttribute向表中添加列排序。

我通过在自定义属性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添加到元素中。我有办法吗？

获取元素的内容（因此，列名称）
在我的视图中使用这些内容
用我的视图替换元素的内容（而不是将我的视图附加到元素中）

使用CustomAttribute替换元素整个内容 - Aurelia

0 个答案: