Aurelia Custom Binding Error

Question

I'm using Aurelia and Typescript and have a custom-element that generates a table after being passed the data, I would like the fields of the table displayed to be generated based off an array I pass in aswell and then using a value converter to change how some are displayed, I'm trying to create a custom-binding so the bindings are generated dynamically from the array passed in and have been following this guide: https://blog.ashleygrant.com/2017/07/09/getting-my-hands-dirty-with-aurelias-binding-engine/ though I could not get it working exactly as he does and had to change some bits.

HTML where I call the custom binding

<require from="services/custom-binding/dynamic-binding-behaviour"></require>
<require from="services/data-format"></require><!--ValueConverters-->
...
    <tbody>
        <tr repeat.for="ticket of listData">
            <td repeat.for="fieldTest of listDisplay">${ticket & dynamic:'ticket':fieldTest}</td>
        </tr>
    </tbody>

And the custom binding class

@inject(Parser)
export class DynamicBindingBehavior {

constructor(private parser: Parser) {
}

bind(binding: BindingWithStorage, source: Scope, dataItem: string, args: FieldList) {

    let arg = dataItem + '.' + args.field;

    if (args.valueConverter) {
        arg += ' | ' + args.valueConverter;
    }
    let parsedExpression: Expression = this.parser.parse(arg);
    binding.originalSourceExpression = binding.sourceExpression;

    binding.sourceExpression = parsedExpression;
}

unbind(binding: BindingWithStorage, source: Scope) {
    console.log('unbind');
    if (binding.originalSourceExpression) {
        binding.sourceExpression = binding.originalSourceExpression;
    }
    binding.originalSourceExpression = null;
    }
}

When I run this the data will display [object Object] for alot of the table cells before something kicks in and it start to display as I would expect it to. Every time I navigate to a new page or refresh it will be the exact same row and column where It will begin to display correctly so I imagine It's something to do with aurelia lifecycles.

The console.log('unbind') never displays in the console so I am not sure if that is also part of the problem, I don't know enough about how Aurelia works to understand if it would.

In the link I provided the expression is rebased but I could not get that to work and can't really understand what it is trying to do there.

You should provide a gist. And a question: is the behavior file name correct ? — bigopon
The file names correct for sure, the behaviour works as intended for part of the data displayed, I was hoping it was an obvious mistake in code I was making, I'll try make a gist at the weekend for it — Lewis

Jeremy Danyow Jeremy Danyow · Accepted Answer · 2017-12-20T02:29:05

Here’s a prototype I built a while ago. Never got around to implementing the editing piece. Supports freezing columns, grouping and uses virtualization to handle large amounts of data.

https://gist.run/?id=9782317010240c90fc30e179eeb41064

https://gist.github.com/jdanyow/9782317010240c90fc30e179eeb41064

Aurelia Custom Binding Error

1 Answers