aurelia

I'm having trouble configuring Bootstrap 4 beta in an Aurelia CLI app (v0.31.1) with requirejs and using TypeScript. After having tried several config variations I keep on getting the following console error: Uncaught Error: Bootstrap dropdown require Popper.js Here are the steps to reproduce. First, install the packages: $ npm install --save jquery bootstrap@4.0.0-beta popper.js Next, I've configured aurelia.json : "jquery", { "name": "popper.js", "path": "../node_modules/popper.js/dist/umd", "main": "popper" }, { "name": "bootstrap", "path": "../node_modules/bootstrap/dist", "main": "js

To get the current route within a non-view-model class, would the best practice be to inject the Router and use this.router.history.fragment? Or is this a no-no? You could inject the router and get the current instruction. Like this: import { inject } from 'aurelia-dependency-injection'; //or framework import { Router } from 'aurelia-router'; @inject(Router) export class MyClass { constructor(router) { this.router = router; } getRoute() { return this.router.currentInstruction.config.name; //name of the route //return this.router.currentInstruction.config.moduleId; //moduleId of the route } }

Twitter bootstrap has a dropdown menu option; where a menu has have multiple layers. See: http://getbootstrap.com/javascript/#dropdowns How can I use Aurelia.js's routers to recreate this? Routers normally provide 1 level. I need 2 levels. Credit for this goes to: https://github.com/adarshpastakia . I "borrowed" most of this person's code to answer this question. You can find it at: https://gist.github.com/adarshpastakia/5d8462b5bc8d958d5cb3 Here are steps to answer the question above: (1) In the router, add a "settings" property. It can be whatever you want. Here is an example: settings:{

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 pas params to Aurelia on start. Depending on values passed the application will have diffrent state. This application is injected on page which is build with PHP, so the best way would be starting it with parameters specified with PHP code. Is there any way to do this? Any data you can access in normal JS you can access with Aurelia. Maybe you could use a data-* attribute to do this? When you use a main file by doing aurelia-app="main", the framework instance you get passed to your configure method has a host property that is the element the framework is being attached to. You could

Could you please tell me what is difference between a component and a View in Aurelia? What are their architectures and What is the difference between their lifecycles? As a rule of thumb, the difference between a view and a component in Aurelia can be summarised as: A view in Aurelia is simply put the .html and the styling that comes with it (.scss/.less/.css) A view-model in Aurelia is the code behind it (.js/.ts class) A component is the combination between a view and view-model, and is glued together automagically by Aurelia In essence you can say that, with Aurelia, pretty much everything

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.