Optional bound attributes

Best Practices
1

Is it possible to bind attributes when it’s is !null or !undefined only?

Example: I have an input element with a pattern attribute.

<input pattern.bind="_pattern"/>

But when _pattern is null or empty, the resulting HTML looks like

<input pattern="null"/>

which is not the same as

<input/>

My solution would be

pattern="${_pattern?_pattern:'.*'}"

but that feels wrong to me so I ask for better approaches.

Best,
Mike

1 Like
2

Aurelia generally, and .bind specifically, by default works with property, so null/undefined will be assigned as-is to the property pattern of an <input/> element. You can have the above effect if you tell Aurelia to treat it as an attribute binding, via either following syntax:

<input pattern.attr="_pattern"/>

<input pattern.bind="_pattern & attr"/>
3 Likes
3

is this au1 or au2? or both?
where is this documented?

1 Like
4

& attr is for both version. .attr is only for v2. In v1, you can have a look at it in this GH issue Support assignment of attribute litterals via interpolation · Issue #106 · aurelia/templating-binding · GitHub
The implementation in v2 is different with the code example there, and is also better.

For the doc, I think it’s not doc’d properly in both versions. Will add it :+1:

3 Likes
5

For some reason, this doesn’t work for me.

<input pattern.bind="definition.scheme.textRegex & attr"/>

still produces

<input pattern/>

image

Edit: Fixed. I had to reset the value to null before.

bind() {
        if (this.definition.scheme.textRegex?.length === 0) {
            this.definition.scheme.textRegex = null;
        }
}
2 Likes
6

Glad you got it working. A simple repro here in case you need to verify anything https://gist.dumber.app/?gist=e90b288be1629f308a020e33982af478

1 Like