FAQ Database Discussion Community


aurelia, es6 and classname case

ecmascript-6,babeljs,aurelia
I'm studying custom components in aurealia and come accross strange behaviour which nature I don't understand. Consider this: component: xxxaaa.html <template> <div>xxxxxx</div> </template> xxxaaa.js: export class Xxxaaa {} app.html: <template> <import from='./xxxaaa'></import> <div> <xxxaaa/> </div> </template> this works as expected, xxxxxx is shown. Then, camelcaseing component: xxxAaa.html: content not changed,...

Configure Aurelia Project using Visual Studio

aurelia
I know it's very new, but I'd like to create a prototype using aurelia with Visual Studio. VS support is in the hopper, but the current documentation is based on node.js et al. Based on the existing documentation, I haven't a clue. I'm hoping I can get some guidance...

Access a DOM element in Aurelia

javascript,html5,dom,aurelia
How would you go about accessing a DOM element in Aurelia? This is a broad and general question, but I have a feeling there are one or two preferred ways to do this. I have two current cases in Aurelia now: In the template I have a form. I want...

How to use aurelia-validate with a object properties to validate?

decorator,ecmascript-6,aurelia,aurelia-validation
I'm using aurelia-validate and my validation works fine if I use variables, but I need it to validate properties of an object rather than a variable: Here's what works: import {Validation} from 'aurelia-validation'; import {ensure} from 'aurelia-validation'; import {ItemService} from './service'; export class EditItem { static inject() { return [Validation,...

Hiding routes in Aurelia nav bar until authenticated

aurelia,aurelia-router
Is there a proper way to hide items in the Aurelia getting started app behind some authentication. Right now I'm just adding a class to each element based on a custom property. This feels extremely hacky. <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}${!row.isVisible ? 'navbar-hidden' : ''}"> <a...

Aurelia project setup and folder structure in Visual Sudio 2015: what goes in wwwroot?

asp.net-5,visual-studio-2015,aurelia
I want to start playing with Aurelia and MVC 6 Web API with Visual Studio 2015 RC, and I'm using OdeToCode's blog post as a starting point. I understand the idea behind the new wwwroot folder, but I'm basically confused as to what should or shouldn't put in there. My...

Two way binding not working on bootstrap-select with aurelia

aurelia
I have managed to create a custom element to use the boostrap-select element. However, I can pass/bind values to it from the main view (parent) but I am unable to get the selection out from the element when I use two-way binding. My custom element is: import {inject, customElement, bindable}...

Aurelia select doesn't work

select,aurelia
I have the following problem. I'm trying to fill a simple select by reading a json file and than displaying the title of any object as an option inside the select. The code works just fine when i try to display the titles inside div elements, but not as select....

Bind raw html in Aurelia

javascript-databinding,aurelia
Using Aurelia, I want to fill an <div> with contents of viewmodel property (lets call it htmlText) which contains html text, and I was using <div> ${htmlText} </div> However, this encodes html so, instead of i.e. having paragraph or link, all tags are escaped so html can be seen as...

Is constant polling the way Aurelia's change detection is working?

aurelia
I got div with if.bind working as was suggested in this question: Using literal JavaScript values in an Aurelia view. But then I noticed that showTemplate on viewModel is being constantly checked by framework, about 10 times per second. The stack is following: execute._prototypeProperties.visible.get (welcome.js:29) getValue (dirty-checking.js:93) isDirty (dirty-checking.js:127) check...

Import non modular scripts (linq.js) in Aurelia

ecmascript-6,aurelia
I have a question about importing script which define global variables to aurelia using import keyword. We can simple import modules but what about scripts like linq.js which define global variable Enumerable? Is this possible to execute that script to define that namespace? I tried to do steps from this...

How to update property from function in Aurelia

javascript,ecmascript-6,aurelia
I want to refresh a property's value on push action, but i don't know how to access to the property from a function ! export class Datas { prop1 = "my val"; } var connection = new WebSocket('ws://localhost:8787', 'json'); connection.onmessage = function (e) { // prop1 of Datas = e.data;...

Run Aurelia Framework without NodeJs and JSPM

.net,aurelia
I am learning Aurelia Framework. I seen its document given example in NodeJs and JSPM. But I don't have NodeJs and JSPM. I am from .Net background. Its possible to run Aurelia Framework without install NodeJS. I want run Aurelia Framework just like add tag and add CDN link. Its...

Error during reading json in Aurelia.io example

javascript,json,jsonp,aurelia
I'm extending aurelia's get started app by adding custom moduls. I've got an error "Uncaught SyntaxError: Unexpected token :" while reading a json. But json validator doesn't find any errors. Here is my json { "news": [ { "title": "Lorem Ipsum is simply dummy text", "type": "news", "tags": [ "news",...

How do I configure my index.html with Systemsj to use an existing bundle?

javascript,aurelia,jspm,systemjs
I have a small TypeScript helloworld application that uses the aurelia.io framework from a bundle file and configured using SystemJS. When I run my app, the compiled typescript version of my helloworld.ts throws an error which reads: TypeError: define is not a function at System.register.execute (http://localhost:9000/src/helloworld.js!eval:31:13) at t ... Seems...

How can I redirect to another view-model in Aurelia JS?

aurelia
I'm writing an application using Aurelia JS. How can I redirect to another URL? Is there a way to do it without creating a whole new navigation pipeline step? Thanks...

How can I change which files Aurelia-App looks for?

aurelia
I've initialised aurelia with <body aurelia-app> ... </body> The getting started guide (http://aurelia.io/get-started.html) says that this will, by default, try to load up app.js and app.html How can I tell aurelia to load up main.js and main.html? if I do <body aurelia-app="main"> only main.js is accessed and the view isn't...

How to connect Aurelia to Firebase?

firebase,aurelia,jspm
Is fbh-firebase-util compatible with aurelia? How to use it? fbh-firebase-util via jspm: jspm install github:djindjic/fbh-firebase-util...

Aurelia web application calling azure mobile services API endpoint

azure,azure-mobile-services,aurelia
I am creating an Aurelia web project that will consume an API. The API is housed as an Azure Mobile Service. I know I need to add the X-ZUMO Auth header to the request. But, when I instantiate my http client, that header never makes it to the request headers...

Drag and Drop in Aurelia not working

drag-and-drop,ecmascript-6,aurelia
I am trying to create a drag and drop control for Aurelia. Initially, it works just fine. <div class="card" draggable="true" repeat.for="card of player2.hand"> However, when I delegate a listener to the dragstart event, the drag no longer works. <div class="card" draggable="true" dragstart.delegate="$parent.dragstart()" repeat.for="card of player2.hand"> I can get the dragstart...

How do you inject a factory function with Aurelia's DI container?

javascript,dependency-injection,aurelia
I'd like to make a third-party object on the window injectable so that I can test functionality independent of the third-party service. The component I'm trying to build is a simple wrapper around Disqus embedded comments. The factory I would like to use is as simple as () => window.DISQUS...

Aurelia get-started browser error

javascript,aurelia
I'm trying the http://aurelia.io/get-started.html project, and after installing everything, i get the following error in chrome console: And this is the error in Firefox ...

How do I set/read a query string when using the router in aurelia?

javascript,query-string,aurelia,aurelia-navigation,aurelia-router
When using the aurelia.io framework router, what is the preferred method for reading and setting a query string? For example, in the url: http://www.myapp.com/#/myroute1/?s=mystate How do I read and set the ?s=mystate part of the url and have the aurelia router navigate correctly and remember that state, such that whenever...

Aurelia update value of bound item in another class

ecmascript-6,aurelia
I guess the question boils down how to i pass the instance of a property to another class. I have something like this: import timerClass from "./timer"; export class App { constructor() { this.timeLeft = 6; //<--- I want to update this new timerClass(this.timeLeft); } activate() { } } and...

Aurelia compose element: childContainer is not defined

javascript,ecmascript-6,aurelia
I want to leverage the <compose> custom element in my application using the view property exclusively. Here is my markup/code: app.html <template> <main> <compose view="views/start.html"></compose> </main> </template> app.js import { Metadata } from 'aurelia-framework'; export class App { static metadata() { return Metadata.singleton(); } constructor() { } } /views/start.html <template>...

How to deploy Aurelia to GitHub pages

javascript,github-pages,aurelia
Is aurelia.io completely client side or does it require server component. i.e. can it a github page. thanks...

Binding to a Namespaced Attribute in Aurelia

javascript,aurelia
When bind to attributes(one-way) there are a couple of options you can either bind with attr-name.bind="variable" (also tried one-way and one-time) or using interpolation attr-name="${variable}", either way though if you try to bind to a namespaced element such as xlink:href you currently get: Uncaught NamespaceError: Failed to execute 'setAttributeNS' on...

Aurelia Validation validation error detected, but no error message

aurelia,aurelia-validation
I have a super simple code I'm trying to validate: <template> <form role="form" submit.delegate="submit()" validate.bind="validation"> <div class="form-group"> <label>Test Field</label> <input type="text" value.bind="testField" class="form-control" validate="Description" placeholder="What needs to be done?" /> <button type="submit">Submit</button> </div> </form> </template> With the following viewmodel define(["require", "exports", "../scripts/HttpClient",...

Using a Decorator to get list of implemented interfaces

typescript,aurelia,babeljs,typescript1.5,es7
Do you know if it is possible to get the array of interfaces implemented by a class using a decorator: interface IWarrior { // ... } interface INinja { // ... } So If I do something like: @somedecorator class Ninja implements INinja, IWarrior { // ... } At run-time...

how to use the ref.view-model feature

aurelia,aurelia-binding
I'm seeing this feature in the docs, but I can't quite figure out how to use it from that information. It says: <i-produce-a-value ref.view-model="producer"></i-produce-a-value> <i-consume-a-value input.bind="producer.output"></i-consume-a-value> What does this look like in real world example?...

Property subscription in Aurelia

javascript,ecmascript-6,aurelia
I have a property on my viewmodel which I want to listen to and trigger events based on its value, like this: class viewModel { constructor() { this.value = '0'; let val = 2; subscribe(this.value, callbackForValue); subscribe(val, callbackForVal); } } Is this a feature of Aurelia? If so, how would...

Aurelia Typescript project only working on Chrome

typescript,aurelia
Does anyone know why Aurelia-Typescript projects listed in this git repository only functions on Chrome browser? Are there ES6 features that are only currently supported on Chrome and not on IE or FireFox? EDIT - below are the error messages from Firefox 34.0.5 mutating the [[Prototype]] of an object will...

The dependency injection (di) paradigm with 3rd party libraries in Aurelia

javascript,reactjs,ecmascript-6,aurelia
I am trying to create Aurelia custom element using React, by following this example on Aurelia Q & A and following exception occurs: Potentially unhandled rejection [1] TypeError: Cannot read property 'render' of undefined What I am doing wrong? Here my test code: test.html <import from="./myelement"></import> <my-element foo.bind="Value"></my-element> myelement.html <template>...

Array subscription in Aurelia

aurelia,aurelia-binding
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,...

How to add an icon/image to routes using Aurelia?

aurelia
I wanted to add an image/icon to my navigation links that were specified in Aurelia's router configuration.

ES6 String Interpolation in Aurelia

ecmascript-6,aurelia
I am trying to follow the "Getting Started" section on aurelia.io and having some problem with string interpolation inside a string. In the viewmodel in the first example, the 'fullName' calculated getter returns a string return '${this.firstName} ${this.lastName}' This value is used in the view (html template) as ${fullName}. The...

When does binding to ref attribute become valid in Aurelia?

aurelia
This is a follow up to this question: Access a DOM element in Aurelia Is there a hook in the Screen Activation Lifecycle which allows me to run code after ref bindings have been set up? Currently it seems like there is a period of time after the activate hook...

How to load System.js modules with TypeScript?

javascript,typescript,aurelia,systemjs
I'm trying to get TypeScript working with the default Aurelia skeleton, which is based on System.JS as a loader. I'm having trouble getting TypeScript to accept module imports. I renamed one of the skeleton files, "nav-bar.js" to "nav-bar.ts" to see if I could convert the example into TypeScript. The code...

Aurelia Router Configuration in Multiple Model-Views

aurelia
Is it possible to configure the router from multiple view-models? Something like the following? class App { ... constructor(router) { this.router.configure(config => { config.map([{ route: 'home', moduleId: 'home', nav: true }]) }) } } Alter the router configuration in other view-model: class SomeOtherPage { ... constructor(router) { this.router.configure(config => {...

Aurelia simple binding is not working

javascript,aurelia
I have a very simple binding which isn't working as I'd expect it to: app.js: export class PupilsViewer { pupilsInfo = [ { name: 'John' }, { name: 'Eric' }, { name: 'Martin' }, { name: 'Simon' } ]; } app.html: <template> <require from="./pupil"></require> <pupil repeat.for="pupilInfo of pupilsInfo" info="${pupilInfo}"></pupil> </template>...

Aurelia repeat.for access index of item

aurelia
I have a simple repeat.for: <li repeat.for="item of items">${item}</li> Currently I'm using: ${$parent.items.indexOf(item)}. Is there a shorthand, something like {{$index}} in angular?...

Using route-href with child routers

javascript,aurelia,aurelia-templating-router,aurelia-router
I'm attempting to use the route-href attribute inside a view in a child router. My parent router looks like so: configureRouter(config, router){ config.title = 'Kali'; config.map([ // { route: '', moduleId: 'no-selection', title: 'Select'}, { route: ['', 'courses'], moduleId: 'courses' } ]); this.router = router; } My child router looks...

Scopes in aurelia application

aurelia
I've just tried aurelia's Get started application and noticed that when open in two browsers (chrome and ff) it keeps navigation in sync. It looks like router instance resides in application scope. I didn't find anything about scopes in documentation so the question is What are the scopes in aurelia,...

Using literal JavaScript values in an Aurelia view

aurelia
I'm trying to make my component hidable by using "if" Template Controller. The problem is that it's visible even if I put false in it: <template if.bind="${false}"> zzzzzzzz </template> if.bind="false" and both cases without bind bring same result. Am I doing something wrong? If not, could you please point to...