标签: aurelia-framework

我一直在关注Contact Manager教程,并希望将Font Awesome添加到项目中.这是我到目前为止所做的:

• npm install Font-Awesome --save
• 在以下aurelia.json的依赖项数组下添加了以下内容vendor-bundle.js:

...
{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome",
    "resources": [
      "css/font-awesome.min.css"
    ]
},
...

但是在运行时au run --watch我得到错误:

错误C:\ Users \node_modules\font-awesome.js

为什么要查找.js文件？

我已经在Aurelia-CLI开发了大约3个月并且喜欢它到目前为止.我认为这是一个坚实的框架,显然在支持和使用方面不断升级.这是好事!

在我开发更多大型应用程序之前,我想知道我是否使用了最好的构建系统.我只尝试过Aurelia-CLI,并不熟悉Webpack或JSPM,因此我不知道我缺少什么.使用其他两个构建系统中的任何一个是否有任何明显的优点或缺点,或者使用CLI是最干净和最受支持的方法？由于我是独立开发的,所以我没有任何外部限制.

谢谢你的帮助.

我正在使用Aurelia的自定义元素重复一组条目.以下是样本要点:https://gist.run/？ id = 38aee85444712​​2f021bc05e1e0de25ae

现在,我需要deleteEntry(entry)在单击custom元素中定义的按钮时访问该方法.我尝试过使用$parent.deleteEntry(entry)但它不起作用.

看到这个问题,但它已经超过一年了,我想知道现在是否有更清洁的方法来实现这一目标.

我有一系列的东西,我正在构建一个<select>,我希望能够first使用CSS 将项目标记为禁用,但我无法正确使用语法.

这就是我所拥有的:

<select select2 value.bind="selectedItem">
    <option repeat.for="item of stuff" model.bind="item" class="${${first} ? 'disabled selected hidden' : ''">
        ${item.key}
    </option>
</select>

这里是个Plunker非常相似,可以用来作为一个试验台.

我错过了什么？

我正在尝试为我的应用注册几个插件但是我不确定应该怎么做.

我拥有的插件包括两个ValueConverters和gooy/aurelia-animator-tinyanimate我安装的插件JSPM.

这是我目前的实施:

资源\ index.ts/JS

export function configure(aurelia) {
  aurelia.globalResources('../from-now', '../date-format');
}

main.ts/js(这是应用程序的入口点)

import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia): void {
        aurelia.use
            .standardConfiguration()
            .developmentLogging()
            .plugin('resources/index', 'gooy/aurelia-animator-tinyanimate'); 

        aurelia.start().then(function () { return aurelia.setRoot('views/app'); });
}

转换器正在工作,但我没有看到tinyanimate要加载.

基于以上所述,我有以下问题:

1. 我该如何移动gooy/aurelia-animator-tinyanimate到index.js文件？
2. plugin()和之间有什么区别feature()？

我有一个自定义元素,它将接受用户输入,并在[保存]按钮单击,我想将信息传递给父视图模型,以便我可以将其发送到服务器并移动到下一部分.我将简化这个例子,例如:

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-model.js:

export class ParentViewModel {
  parentProperty = 7;
  parentMethod() {
    console.log(`parent property: ${this.parentProperty}`);
  }
}

parent-view-model.html:

<template>
    <require from="./my-element"></require>
    <div class="content-panel">
        <my-element save.bind="parentMethod"></my-element>
    </div>
</template>

有关演示,请参阅(app.js和app.html代表parent-view-model.js和parent-view-model.html):

https://gist.run/?id=96b203e9ca03b62dfb202626c2202989

有用!的种类.不幸的是,this似乎必须my-element代替parent-view-model,所以在这个例子中,打印到控制台的是:parent property: undefined.那样不行.

我知道我可以利用EventAggregator来促进自定义元素和视图模型之间的某些通信,但如果我能帮助它,我想避免增加复杂性.

我有一个大插件(abalmus/aurelia-ace-editor),我正试图加载到Aurelia,这会损害我的页面加载时间.有没有人知道如何加载Aurelia插件,而不是在应用程序启动？

Main.ts:

import { Aurelia } from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation')
    .plugin('aurelia-validatejs')
    .plugin('aurelia-animator-css')
    .plugin('abalmus/aurelia-ace-editor')
    .plugin('aurelia-cookie')
    .feature('lib/form-validation-renderer');

  aurelia.start().then(() => aurelia.setRoot());
}

我在Aurelia创建了一个自定义元素.

import {bindable, inject, customElement, bindingMode} from 'aurelia-framework';
import 'select2';
import * as $ from 'jquery';
import {BindingSignaler} from "aurelia-templating-resources";

@customElement('select2')
@inject(Element, BindingSignaler)
export class Select2CustomMultiselect {
    @bindable name = null;    // name/id of custom select
    @bindable selected = null;  // default selected values
    @bindable ({defaultBindingMode: bindingMode.oneWay, attribute:"options"}) source:Array<{id:number, name:any}>= [];   // array of options with id/name properties
    @bindable placeholder = "";
    @bindable allow_clear = true;
    private $select2: $;

    constructor(private element, private signaler:BindingSignaler) {
    }

    attached() {
        let $select = …

将aurelia自定义元素导出到Web组件的状态是什么？我可以看到在https://github.com/aurelia/web-components上已经完成了一些工作,但是没有文档存在,它只是"很快"说明.

它将如何运作？我们什么时候应该期待它？最重要的是,值得研究一下吗？

更新了解决方案(28.03.2017):

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/8
用解决方案更新了Aurelia文档(向下滚动一点).
特别感谢Charleh提示.

题:

Aurelia有这个很好的功能调用enhance,它可以帮助您使用Aurelia功能增强应用程序的特定部分.
但是我们可以在同一页面上有多个增强语句吗？这似乎有问题.

示例:
任务:增强页面上的第一个组件,然后从服务器获取一些数据并增强页面上的第二个组件,其中服务器数据作为绑定上下文

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <my-component1></my-component1>
    <my-component2></my-component2>
  </body>
</html>

JS

import { bootstrap } from 'aurelia-bootstrapper-webpack';

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .globalResources("my-component1", "my-component2");

  aurelia.start().then((app) => {

    // Enhance first element
    app.enhance(null, document.querySelector('my-component1'));

    // Get some data from server and then enhance second element with binding context
    getSomeDataFromServer().then((data) => {
      app.enhance(data, document.querySelector('my-component2'));
    });
  });
});

结果:
在结果中我们将增强第一个组件,但是当第二个组件时,Aurelia将尝试再次增强第一个组件!
它是因为aurelia-framework.js _configureHost方法而发生的.
所以基本上当你启动enhance它时,你的元素作为一个应用程序主机启动这个方法:

Aurelia.prototype.enhance = …