Rusty (Aurlia v.1) programmer needs help with checked.bind

Help Requests
1

Hi,

As some of you may have surmised from my previous posts this year I’m a bit rusty when it comes to Aurelia (and TypeScript). So once again I turn to the community hoping to get some help.

In a project I’m working on we’re using DataTables.net with a wrapper developed by Jeroen Vinke (of Gitter::Aurelia fame). For each column in said table we call the render function and in one case it should draw a checkbox like so:

{ render: function(data: any, type: any, full: any, meta: any) : string {
	let result = '';
	const someObject = full.value;
	if (!someObject.isSelectable) {
	  result = result + '<span><img src="../../../../../../resources/images/chain_16px.png" title="' + self.getText('no.selectable.elements') + '"></span>';
	} else {
	  result = result + '<div class="checkbox top-checkbox"><input type="checkbox" id="' + someObject.code + '" click.delegate="selectAllChildObjects($this)"></div>';
	}
	return result;
}},

What I need help with is to figure out how I can set checked.bind to a property on someObject, e.g. checked.bind="someObject.isSelected". If at all possible, what would be the correct syntax for this?

TIA

2

I can’t guarantee that my solution is the right way to do it, but since you are generating HTML on the fly, after the table is rendered, you need to “Enhance” it to have working bindings.

Something like this:

this.templatingEngine.enhance({
    element: el,
    bindingContext: this.bindingContext || this,
});

where el is your table element

Edited: added an example

3

Does this apply to Aurelia v.1? (sorry. forgot to specify the Aurelia version in my initial post).

4

Yes, it’s Aurelia 1.

1 Like
5

I cannot find the relevant guide on Aurelia’s site, but please look at my first reply, I edited it with the example. You basically need to inject the Templating Engine, and then call it’s enhance method with table or wrapper element specified in the config object, together with binding context.

6

Ok. I’ll give it a try.

7

Just one more question. Why isn’t the suggested solution required when it comes to declaring the click.delegate?

8

I don’t know exactly how the templating and binding engines work, so I can assume that if click.delegate works without enchance, it’s only because in the case of delegate the event is “bubbled” to the document root and then handled by Aurelia (instead of, for example, click.trigger which is attached to the element itself). Maybe.

9

The wrapper around DataTables.net is already employing the template engine and the generated html for e.g. the checkboxes has both the au-targetclass as well as the au-target-id property set which I believe is indicative of the template engine having done its work (at least according to this article: Enhancing At Will Using Aurelia's Templating Engine Enhance API - I Like Kill Nerds). So I guess the question remains, how to get checked.bind=someArrayItem.someProperty to work in this case?

@bigopon Any chance of you chiming in? :wink: