Search code examples
aurelia

Using aurelia variable in html attributes

I want to dynamically set the input datetime step granularity using aurelia binding.

In my time.js:

timeStep = "1";

In my time.html:

The following works correctly: 

<input type=datetime-local value="2017-01-01T00:00:00" step="1" value.bind="formParameters.timeFrom" >
${timeStep}

enter image description here

However when I try to set the step using my variable - it doesn't seem to work:

<input type=datetime-local value="2017-01-01T00:00:00" step="timeStep" value.bind="formParameters.timeFrom" >
${timeStep}

enter image description here

You can see I have lost the seconds granularity. When I inspect the element, it comes out as:

<input type="datetime-local" value="2017-01-01T00:00:00" step="timeStep" value.bind="formParameters.timeFrom" class="au-target" au-target-id="37">

Where timeStep should be "1".

Solution

  • To bind any HTML attribute to a property in your viewModel - you need to use .bind. 

    <input type=datetime-local value="2017-01-01T00:00:00" step.bind="timeStep" value.bind="formParameters.timeFrom">

    Aurelia will assume anything in a .bind attribute is a property of your viewModel class and bind them accordingly. You can use .bind on any (as far as I know) HTML attribute.