I am trying to create a custom attribute similar to the naive-if custom attribute listed in the Aurelia cheat sheet. The custom attribute when applied to an element will trigger an if.bind on the element based on the value of the attribute. The usage of the custom attribute is as below
<mycustomelement check-and-bind="somestring>
The code for the custom attribute class is as below
import {BoundViewFactory, ViewSlot, customAttribute, templateController, inject} from ‘aurelia-framework’;
import {BindingEngine} from ‘aurelia-binding’;@customAttribute(‘check-and-bind’)
@templateController
@inject(BoundViewFactory, ViewSlot)
export class CheckAndBind {
show: boolean;constructor(private viewFactory: BoundViewFactory, private viewSlot: ViewSlot, private bindingEngine: BindingEngine) { this.viewFactory = viewFactory; this.viewSlot = viewSlot; this.bindingEngine = bindingEngine; this.show = false; } bind() { this.updateView(this.value); }valueChanged(newValue, oldValue): void {
console.log(‘Value changed’);
this.updateView(newValue);
}private updateView(newCheckValue: string): void { console.log('New Value supplied ' + newCheckValue); let isShowing = this.show; if (newCheckValue.trim().length == 0) { this.show = true; } else { let validPermissions = newCheckValue.trim().split(','); this.show = //Custom class which checks the string and returns true/false } console.log('Login context ' + this.show); if (this.show) { console.log('Adding'); let view = this.viewFactory.create(); this.viewSlot.add(view); } else if (!this.show) { console.log('Removing'); this.viewSlot.removeAll(); } }}
The custom attribute works fine in hiding the custom element. It seems to fail while displaying the custom element. The bindable properties of the custom element are not getting bound when the view is added to the view slot. Could someone tell me why this is happening?
