aurelia | 易学教程

Aurelia: Isomorphic?

阅读更多关于 Aurelia: Isomorphic?

问题 As far as I know, Aurelia does not support server-side rendering as mentioned here. But the question is: is it possible to do this with some hacks/workarounds? The most obvious idea would be to use Phantom, Nightmare.js or whatever to simply render that page in Chrome on server and serve that to client, but this is very likely to cause big productivity issues. Thanks! UPD According to Rob Eisenberg's response on FDConf today (16 Apr 2016), server-side rendering will be implemented in 2016,

In Aurelia, can I bind a function from my containing view-model to be called by my custom element?

阅读更多关于 In Aurelia, can I bind a function from my containing view-model to be called by my custom element?

问题 I have a custom element which will take user input, and on [save] button click, I want to pass information to the parent view-model so I can send it to the server and move to the next section. I'm going to simplify this for example's sake: my-element.js : import { customElement, bindable } from 'aurelia-framework'; @customElement('my-element') @bindable('save') export class MyElement { } my-element.html : <template> <button click.delegate="save()">Click this</button> </template> parent-view

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 ObserverLocator, but it doesn't fire on nested updates, too. The object in app.js: this.data = {

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-content-wrapper"> <div class="page-content">  <js-theme-panel><

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 class WorkDetail { constructor(router) { this.workRoute = router.routes[2].navModel; }; activate(params

How to define and render submenu-items, using Aurelia's Router

阅读更多关于 How to define and render submenu-items, using Aurelia's Router

In an Aurelia app, I've defined a simple route like this: configureRouter(config: RouterConfiguration, router: Router) { config.title = 'Marino'; config.map([ { route: ['', 'home'], name: 'home', moduleId: './pages/home/home', nav: true, title: 'Home' }, { route: 'colors', name: 'colors', moduleId: './pages/colors/overview', nav: true, title: 'Colors' } ]); this.router = router; } This works perfectly as all the examples mention, by implementing repeat.for and href.bind like this: <ul class="main-navigation"> <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> <a

Using a Decorator to get list of implemented interfaces

阅读更多关于 Using a Decorator to get list of implemented interfaces

问题 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 Ninja will have an annotation which contains ["INinja", "IWarrior"] ? Thanks 回答1: Currently, types are used only during development and compile time. The type information is not translated in any way to the compiled JavaScript code

Aurelia router view animation with swap-order=“with”

阅读更多关于 Aurelia router view animation with swap-order=“with”

I am using aurelia-animator-css to animate router views. Upon navigation to a new router view, I want the current view to slide off screen to the left while the new view slides onto the screen from the right. Here is my router-view element: <router-view swap-order="with"></router-view> Here is the top element in each of the views: <div class="pages au-animate"> And here is the css: @keyframes slideLeftIn { 0% { transform: translate(100%, 0); } 100% { transform: translate(0, 0); } } @keyframes slideLeftOut { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } .pages.au

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 which can be bound, but these custom elements are emitted to the DOM as HTML elements. For example

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", "isShellCommand": true, "tasks": [ { "taskName": "watch", "suppressTaskName": true, "args": [ "run", "--watch" ]