Custom Attribute does not bind the custom element properties

Help Requests
1

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?

1 Like
2

In the updateView method, a new view is created every time it’s called, is this intentional? Maybe you want to cache it and only bind/unbind?

Also, could you help demonstrate the issues with a gist? https://gist.dumber.app

3

Looks like the bindingEngine is not injected. Could that be the problem? Or perhaps just lost in the example? :slight_smile:

Btw, I just notice a similar issue a little while back: How to properly extend the IF attribute perhaps that can help you as well.

4

@bigopon I have the gist in place https://gist.dumber.app/?gist=c0f5699dc9b71416533faf487c6e2e17