aurelia

I'd like to create a custom element that loops through an array and applies the to each item in the array. For example, the view template of the custom element would contain something like: <div repeat.for="i of items"> <div with.bind="i"> <slot></slot> </div> </div> When I remove the repeat.for and with.bind attributes, the slot displays a single time. Is there a way to make it repeat for each item in the list? No, you cannot use slots with repeat.for or bind today. To do this you have to use replaceable parts. For example: <div repeat.for="i of items"> <div with.bind="i"> <template

Recently I've been playing around with different frameworks and libraries, looking for something that really suits my needs. You see, my job mainly involves creating asp.net mvc applications and for most of them using Razor and a little bit of jQuery is enough. But in certain cases and only for a few pages,which are rarely more than one or two per app, I really need something extra that helps me avoid getting entangled in a bunch of jQuery code. As I mentioned, I tried a couple of alternatives and from them, the one I liked the most is Aurelia, because of its simplicity and the fact that it

DevExtreme support angular directives as shown on this example page for dxDataGrid . How can I achieve the same with Aurelia? Examples showing the integration: https://www.youtube.com/watch?v=iIZj6hOFg0o http://blog.falafel.com/getting-started-with-devexpress-and-angularjs/ DevExtreme does not support integration with Aurelia out-of-the-box. But you can try to create the Custom Elements for some DevExtreme widget. You may want to check out the work of Stefan Heim. He's created some prototype examples of DevExtreme/Aurelia integration. There's a GitHub repository and demo available: https:/

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 an ASP.NET Core project, which also hosts an Aurelia CLI project, using TypeScript / SASS. The IDE is Visual Studio 2015. When the project is built by Visual Studio or MSBuild, the au build command is executed in the precompilation target, so when I build or run the ASP.NET Core project from Visual Studio using F5, Aurelia CLI will build and bundle the assets for the Aurelia app into wwwroot as well. This workflow ensures that any solution changes are correctly built, and it also ensures that .NET Core is running as the web server, however, it's slow for developers, because any changes

I can't seem to get these to work together. I'm using the Aurelia CLI and have done so in a similar manner for other libraries successfully(like select2, spin, moment and numeral). I can't seem to get toastr to work though. Here is what I have so far. First I ran npm install toastr --save and typings install dt~toastr --global --save In aurelia.json , in the vendor-bundle.js section, I added a dependency as such: "jquery", { "name": "toastr", "path": "../node_modules/toastr/build", "main": "toastr.min", "resources": [ "toastr.min.css" ], "deps": ["jquery"] } UPDATE: Full steps to repro I have

I'm trying to include Bootstrap in my Aurelia CLI project, and the CSS and JS work fine. The only problem I have is the glyphicons require font files to be loaded. I use this configuration: "dependencies": [ { "name": "bootstrap", "path": "../node_modules/bootstrap/dist", "main": "js/bootstrap.min", "deps": ["jquery"], "exports": "$", "resources": [ "css/bootstrap.min.css", "fonts/glyphicons-halflings-regular.woff2" ] } ] But I get an error containing this line: path: 'C:\Users\randy\Documents\form\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.js' So even though I include the

I am trying to get the Amazon Cognito Identity SDK working in Aurelia. I do not have a lot of Javascript experience and am very unfamiliar with the various dependency systems. I installed the Cognito SDK using: npm install --save amazon-cognito-identity-js I then edited my aurelia_project/aurelia.json file as suggested in the Aurelia documentation to include a new client library dependency in build.bundles vendor-bundle dependencies: "sjcl", "jsbn", { "name": "aws-sdk", "path": "../node_modules/aws-sdk/", "main": "dist/aws-sdk" }, { "name": "amazon-cognito-identity-js", "path": "../node

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 is called when the ref bindings are not set up yet and then at some point they get activated. I tested this by adding a <div ref="myDiv"></div> to near the bottom of welcome.html in a cloned version of the latest (v0.13.0) skeleton-navigation repo and testing the existence of the reference in the view-model like this: export class Welcome

I'm trying to figure out how to store a "global" like function in Aurelia. I've followed this tutorial " http://blog.durandal.io/2015/04/24/aurelia-custom-elements-and-content-selectors/ " to open a modal with a dynamic view modal, but I can't figure out where I should actually put this function so I can re-use it all my view routes. I've created this function in my default view: //open modal setModal(modal) { this.contentModal = modal; $('.modal').modal(); } with this markup inside that view template: <a click.delegate="setModal('users')">Test</a> <a click.delegate="setModal('child-router')"