aurelia-binding

In my application I have made a lot of "services" which I can inject in my viewmodels to save som redundancy and time. Now I'm looking to take it 1 step further, and make those form elements (select, text, checkboxes - a select dropdown for starters) and turn them into custom elements, injecting the service in only the custom element. I can get it working to some extent. The custom element (select in this case) is showing when I require it in the "parent" view, however when I change the selected value of the custom select element, it does not bind to the "parent" viewmodel, which is my

Using Aurelia I am struggling with binding and repeat.for : suppose I have in my viewmodel with a property menuItems (an array of MenuItem ) I would like to repeat the menuitems with a custom template : export class App { menuItems : MenuItem[]; } export class MenuItem{ label:string; } In my app template I use use a custom element <require from="./menu-item"></require> <ul> <menu-item repeat.for="item of menuItems"></menu-item> </ul> My custom template (menu-item.html): <template> <li>${label}</li> </template> What is the correct way the get the template bound or access the bound MenuItem? I

I have a strange case in an Aurelia template of elements with if.bind inside a repeat.for not being shown/hidden when their underlying property is changed. With the following code, the edit fields should be shown and the edit button should be hidden as soon as the edit button is clicked. Subsequently, both the save and undo buttons should hide the edit fields and show the edit buttons again. MyList.ts: import { computedFrom } from "aurelia-binding"; export class MyList { items: any[] = [{ "firstName": "Joe", "lastName" : "Blow", "id": 1 }, { "firstName": "Jane", "lastName" : "Doe", "id": 2 } ]

Let's say I have an array of elements and in addition to displaying the list in my app, I want to sync the list to the server with HttpClient . How can I observe changes to the array? I tried: @inject(ObserverLocator) export class ViewModel { constructor(obsLoc) { this.list = []; obsLoc.getObserver(this, 'list'); .subscribe(li => console.log(li)); } } But I got neither error nor log message. Jeremy Danyow getObserver returns a property observer which will notify you when the ViewModel class instance's list property changes. This will only happen when you assign a new value to the list property

I am using Aurelia and I have an array of items bound to a grid and they have a selected property on them. I want to bind a button to be enabled when any one of the items is true. I can do a brute force approach where I have a getter that is filtering the list and returning the selected items, but that means that I would be doing dirty checking constantly in the app and I don't want to do that. I am hoping for a more efficient approach. Any ideas? Few things you could do- assuming I have your use case right: dirty-checking (it's only one property- not a big deal) export class Item { selected =

I want to extend the behavior and data of a class using decorators instead of inheritance. I also want to apply decorators as well to the newly created properties or methods. Is there an example of how to do this? Is this even possible? Imagine a set of classes where some of these classes share a bindable property named span . Also let there be a computed property named leftMargin dependent on the span property. The desired way to implement this would be to decorate the class with a decorator named @addSpan for example, that adds both the bindable property and the computed property to the

I'd like to pass the user, found during the AuthorizeStep to either the App class and then to the home module . Here's what I have: export class App { configureRouter(config, router) { config.addPipelineStep('authorize', AuthorizeStep); config.map([ {route: ['', ':filter'], name: "", moduleId: 'welcome'} {route: 'home', name: "home", moduleId: 'home' auth:true} ]); this.router = router; } } class AuthorizeStep { run(routingContext, next) { if (routingContext.nextInstructions.some(i => i.config.auth)) { this.client.get('auth/login') .then(response => { this.user = response.content; }); } return