aurelia-binding

UPDATE: It looks like this is a known bug: https://github.com/aurelia/templating/issues/253 I am leaving it here for reference / searchability purposes. The Code: input-mask.ts (Full code can be seen here ) @customAttribute('input-mask') @inject(Element) export class InputMaskCustomAttribute { @bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'onUnmaskedValueChanged' }) unmaskedValue: any; onUnmaskedValueChanged(newValue, oldValue) { console.log('unmaskedValue updated from inside the custom attribute'); } @bindable mask: string; attached() { this.eventTarget.on('focusout', (e:

I have a recursive object in my Aurelia view model that looks like this: Class BottomlessPit { Name: string = ''; MorePits: BottomlessPit[] = null; } Therefore, I'd like to use a recursive template in my Aurelia view. It will only be used in one place, so I would rather use a template literal. Here's some pseudocode that doesn't work: <template name="pit"> <li> ${Name} <compose view.bind="pit" repeat.for="subpit of MorePits"></compose> </li> </template> Is this a feature of Aurelia? OK this hurt my head a little bit but here's a way to enable defining inline html-only custom elements... https:

The Code: I have two classes: export class Shipment { shipmentId: number; widget: Widget; } export class Widget { widgetId: number; name: string; } Then I have a ShipmentUi view-model that has an instance of shipment ( this.shipment ). And in the ShipmentUi view I compose part of the UI show the WidgetUi that allows selection of the Widget: <compose view-model="src/views/widgetUi" model.bind="shipment"></compose> The WigetUi's view-model saves off the shipment. So WidgetUi has a this.shipment . And then widgetUi's view shows a selector: <select value.bind="shipment.widget" > <option class=

So, I have a list of all users, which populates the options of a select. <option repeat.for="user of userService.users"> ${user.firstName} ${user.lastName} </option> And I have an incoming group record which has a list of users attached to it. I follow the cheat sheat instructions and bind it to a single index of the model. <select value.bind="group.users[0]"> <option repeat.for="user of userService.users" model.bind="user"> ${user.firstName} ${user.lastName} </option> </select> So, the incoming user in the group is identical to one of the users in the list: { id: 123, firstName: 'Matt',

I am starting with a simple TODO app with Aurelia, RethinkDB & Socket.IO. I seem to have problem with re-rendering or re-evaluating an object that is changed through Socket.IO. So basically, everything works good on the first browser but doesn't get re-rendered in the second browser while displaying the object in the console does show differences in my object. The problem is only on updating an object, it works perfectly on creating/deleting object from the array of todo items. HTML <ul> <li repeat.for="item of items"> <div show.bind="!item.isEditing"> <input type="checkbox" checked.two-way=

Hi am new to aurelia js , i need to upload file to server,am using autrelia js, materializecss and httpClient.fetch for api call. I dont'know how to send file to server. view : <input type="file" files.bind="selectedFiles" change.delegate="onSelectFile($event)"> Model : onSelectFile(e) { var myurl = 'http://cdn.dmsapp.tk/file?authToken=bLNYMtfbHntfloXBuGlSPueilaHtZx&type=jpg&name=sibi.jpg&userId=7&organizationId=1&sourceType=USER_UPLOADS'; this.httpValueConverter.call_http(myurl,'POST',this.selectedFiles[],'fileupload',file_upload) .then(data => { console.log(data); if(data.meta && data.meta

I have a simple class, Event with a computed property: import moment from 'moment'; export class Event { constructor(data) { Object.assign(this, data); } get playedFromNow() { return moment(this.CreateDate).fromNow(); } } playedFromNow just returns a string based on the CreateDate property, like 7 minutes ago . The viewmodel gets an array of events and the view renders the events. The array gets updated via websockets every time a new event occurs (every few minutes). <div repeat.for="event of events"> <div class="media-body"> <h4 class="media-heading">${event.title} <small>${event

I've created a custom element that generates tabular data. For good reasons, this generates the actual HTML and inserts into the DOM without using a template. I need to attach click observers to specific elements to I can run a function in the custom element in response to a click. If using a template, I'd use click.delegate, but I can't use that with generated HTML. How do you attach an event handler with Aurelia other than by using jQuery? I know this answer is late, but in case this hasn't been (properly) solved yet and/or someone else finds this in the future: In order to make any aurelia