Use a CustomAttribute to replace elements entire content - Aurelia -
i'm using customattribute on <th>
add column ordering table.
i've achieved using following in custom attribute vm;
import {bindable, inject, observable, container, viewengine, viewslot, bindingmode} '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 ordering column, move 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 column, lets start doing 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; } } }
and simple view;
<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>
i've written straightforward logic sort data when sort icon clicked.
the issue i'm having want whole of column heading link, not icon. code above adds customattribute vm element. there way can;
- get contents of element (so, column name)
- use these contents in view
- replace contents of element view (rather appending view element)
Comments
Post a Comment