aurelia | 易学教程

Setting a “related” route as active in Aurelia

阅读更多关于 Setting a “related” route as active in Aurelia

问题 I have two routes in my Aurelia app, a list (Work) and a detail (WorkDetail). In the navigation, I only have the list route: Home | *Work* | Contact | . . . When I navigate to the WorkDetail view, I would like to set the Work route as active in the navigation. What I've tried so far is setting the route active in the activate() callback of the WorkDetail view and inactive on deactivate() : import {inject} from 'aurelia-framework'; import {Router} from 'aurelia-router'; @inject(Router) export

Aurelia binding hook on “nested” data update in custom element

阅读更多关于 Aurelia binding hook on “nested” data update in custom element

问题 I'm want to get notified, when a update happened in an binded object. This plunk http://plnkr.co/edit/7thr0V demonstrates my problem. In more detail: I pass an object "data" via bind [data.bind] into a custom element. if i now update a property in data, i would expect, that the "dataChanged" hook in the custom element is called. If i show property from the binded data object in the custom elements template, it gets updated, so the binding itself works properly. My second reproach is using the

How to render different view structures in Aurelia?

阅读更多关于 How to render different view structures in Aurelia?

问题 I have a common html structure in my app.html in order to apply for all pages: <template> <require from="header"></require> <require from="side-bar"></require> <require from="theme-panel"></require> <require from="footer"></require>  <js-header></js-header>  <div class="clearfix"></div>  <div class="container"> <div class="page-container">  <js-side-bar></js-side-bar>  <div class="page

Does Aurelia have virtual elements?

阅读更多关于 Does Aurelia have virtual elements?

问题 Knockout JS has the concept of virtual elements. These are "headless" elements which you can bind to that do not have an HTML element as a container. This allows you to bind arrays in a container that emits no outer HTML. For example, in Knockout JS you can do something like:  <li data-bind="text: $data"></li>  A series of li tags will be emitted without a parent element. Does Aurelia offer something similar? I do see you can create custom elements in

Aurelia Validation - no message shown on failed validation

阅读更多关于 Aurelia Validation - no message shown on failed validation

I've been working through the Aurelia-Validation example, and I have the following: index.html <!doctype html> <html> <head> <title>Aurelia</title> <link rel="stylesheet"href="styles/styles.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body aurelia-app="main"> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('aurelia-bootstrapper'); </script> </body> </html> welcome.js import {Validation} from 'aurelia-validation'; export class Welcome{ static inject() { return [Validation]; } constructor(validation)

Aurelia: Trigger Validation on tab-out(blur event)

阅读更多关于 Aurelia: Trigger Validation on tab-out(blur event)

I have returned a validation group to validate my inputs which triggers on submit button and I want to trigger by validation on blur event to trigger respective validation, not all. For example: HTML: <form role="form" submit.delegate="welcome()" validate.bind="validation"> <div class="form-group"> <label for="fn">First Name</label> <input type="text" value.bind="firstName & updateTrigger:'blur'" class="form-control" id="fn" placeholder="first name" /> <span>${firstName}</span> </div> <button type="submit" class="btn btn-default">Submit</button> </form> Validation Rule in ViewModel : this

How to implement `au run --watch` task + debugging

阅读更多关于 How to implement `au run --watch` task + debugging

问题 I'm trying to implement "F5" debugging for Aurelia CLI based applications in VS Code. The Aurelia CLI is built on top of Gulp tasks. I'd like to set up a task that runs au run --watch and have this task launched when pressing "F5" for debugging ("Launch Chrome" option). Creating a basic task for the au run --watch command is simple enough. { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "au",

Reflect.getOwnMetadata is not a function with karma-typescript

阅读更多关于 Reflect.getOwnMetadata is not a function with karma-typescript

I am trying to unit test (with Karma + Jasmine + karma-typescript ) my TypeScript project. The project structure is as follows: root |- src/*.ts //all TypeScript source files |- tests/unit/*.spec.ts //all spec (test) files |- karma.conf.js |- tsconfig.json My karma.conf.js looks like following: module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', "karma-typescript"], karmaTypescriptConfig: { tsconfig: "./tsconfig.json" }, files: [ 'src/*.ts', 'tests/**/*Spec.ts' ], exclude: [], preprocessors: { "**/*.ts": ["karma-typescript"] }, reporters: ["progress", "karma

CSS Management with the Aurelia-CLI: Every view loads another CSS file to be enforced site wide causing conflicts

阅读更多关于 CSS Management with the Aurelia-CLI: Every view loads another CSS file to be enforced site wide causing conflicts

问题 I have a project with 6 views (html). Each of those views has a corresponding view model (.js) and a style sheet just for that view (.css) The aurelia-cli does a wonderful job of recursing through my file free and bundling all the .js and .css files into a couple of files so they can be referenced while reducing page load times and size. So if I have a welcome folder with a welcome.html, welcome.js and welcome.css, I can load the CSS for welcome.html with the following <require from=".

Aurelia Binding Click Trigger in Nav Bar

阅读更多关于 Aurelia Binding Click Trigger in Nav Bar

Given the following layout for app.html: <template> <require from="nav-bar.html"></require> <require from="bootstrap/css/bootstrap.css"></require> <nav-bar router.bind="router"></nav-bar> <div id="sidebar"><h3>This is the sidebar.</h3></div> <div id="page-host" class="page-host"> <router-view></router-view> </div> </template> How do I bind to the toggleSidebar function (which is exported from app.js) in nav-bar.html? <template bindable="router"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> .... <a class="navbar-brand" href="#" click.trigger