aurelia-binding

I have returned a validation group to validate my inputs which triggers on submit button and I want to trigger by validation on blur event to trigger respective validation, not all. For example: HTML: <form role="form" submit.delegate="welcome()" validate.bind="validation"> <div class="form-group"> <label for="fn">First Name</label> <input type="text" value.bind="firstName & updateTrigger:'blur'" class="form-control" id="fn" placeholder="first name" /> <span>${firstName}</span> </div> <button type="submit" class="btn btn-default">Submit</button> </form> Validation Rule in ViewModel : this

Given the following layout for app.html: <template> <require from="nav-bar.html"></require> <require from="bootstrap/css/bootstrap.css"></require> <nav-bar router.bind="router"></nav-bar> <div id="sidebar"><h3>This is the sidebar.</h3></div> <div id="page-host" class="page-host"> <router-view></router-view> </div> </template> How do I bind to the toggleSidebar function (which is exported from app.js) in nav-bar.html? <template bindable="router"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> .... <a class="navbar-brand" href="#" click.trigger

We are thinking about using Aurelia for a new app. I come from an Angular 1 background (with some exposure to Angular 2). Aurelia seems quite nice and I really like how they have taken on the responsibility of maintaining developer workflow. However I have some questions which I cannot seem to find the answers to: 1) There are two general ways (as I understand) that one can include a web component in a page. These are <compose> and write a custom element. My question is, coming from Angular there is a big emphasis on scopes (i.e. what is in scope at a specific point in the DOM). I am wondering

I have a custom attribute that processes authentication data and does some fun stuff based on the instructions. <div auth="disabled: abc; show: xyz; highlight: 123"> There's a lot of complicated, delicate stuff happening in here and it makes sense to keep it separate from semantic bindings like disabled.bind . However, some elements will have application-logic level bindings as well. <div auth="disabled.bind: canEdit" disabled.bind="!editing"> Under the covers, my auth attribute looks at the logged in user, determines if the user has the correct permissions, and takes the correct action based

I need to create an input in Aurelia that only accepts a phone number. If the user types 1234567890 into this input it should display (123) 456-7890 and the bound variable would be set to 1234567890 . The result should be the same if the user types (123) 456-7890 into the input as well. If the user types a letter into the input, the input should not display the letter, nor should the bound javascript variable get updated. I'm able to partially achieve this using a ValueConverter: phone.ts export class PhoneValueConverter { private removeNonDigits(input) { let digits = ''; // Remove non-digits.