我已经在Aurelia-CLI开发了大约3个月并且喜欢它到目前为止.我认为这是一个坚实的框架,显然在支持和使用方面不断升级.这是好事!
在我开发更多大型应用程序之前,我想知道我是否使用了最好的构建系统.我只尝试过Aurelia-CLI,并不熟悉Webpack或JSPM,因此我不知道我缺少什么.使用其他两个构建系统中的任何一个是否有任何明显的优点或缺点,或者使用CLI是最干净和最受支持的方法?由于我是独立开发的,所以我没有任何外部限制.
谢谢你的帮助.
我有3级嵌套路由器,定义如下:
app.js
configureRouter(config, router) {
this.router = router;
config.title = 'EagleWeb';
var step = new AuthorizeStep(this.core);
config.addAuthorizeStep(step);
config.map([
{ route: '', redirect: 'home' },
{ route: 'home', name: 'home', moduleId: 'home/home' },
{ route: 'users', name: 'users', moduleId: 'users/user-home' },
{ route: 'accounting', name: 'accounting', moduleId: 'accounting/accounting' }
]);
}
Run Code Online (Sandbox Code Playgroud)
会计/ accounting.js
configureRouter(config, router) {
config.map([
{ route: '', redirect: 'home' },
{ route: 'home', name: 'accounting-home', moduleId: 'accounting/accounting-home' },
{ route: 'accounts', name: 'accounting-accounts', moduleId: 'accounting/accounts/accounts' },
{ route: …Run Code Online (Sandbox Code Playgroud) 我有一个简化的自定义数据网格元素,如下所示:
export class DataGrid {
@bindable data;
dataChanged(newValue, oldValue) {
console.log("Sensing new data...", newValue);
}
}
Run Code Online (Sandbox Code Playgroud)
实例化如下:
<data-grid data.bind="records"></data-grid>
Run Code Online (Sandbox Code Playgroud)
出现数据网格时,控制台中将显示“正在检测新数据...”和记录数组。但是,当我从对象数组中删除一条记录时,dataChanged()不会触发该函数。
let index = this.records.findIndex((r) => { return r.acc_id === this.record.acc_id; });
if (index > -1) {
console.log("Deleting element..." + index, this.records);
this.records.splice(index, 1);
}
Run Code Online (Sandbox Code Playgroud)
我在控制台中看到“正在删除元素...”,但没有看到“正在检测新数据...”。
有什么想法为什么dataChanged()我在拼接唱片时不开火?
我有一个 Google Compute Engine 组 Group。我已经更改了组反复使用的模板,它现在在Template5上。该组有一个实例 Instance,该实例使用先前的模板 (Template4)。Template4 已被删除,不再存在。我没有看到强制实例更改模板的方法。我尝试过/被阻止尝试的事情:
我无法让 Aurelia-Validate 处理我日历记录中的字段。
calendar.html(摘录)
<form>
<div class="form-group">
<label class="control-label" for="cal_name_orig">Calendar name</label>
<input type="text" class="form-control" id="cal_name_orig" value.bind="calendar.cal_name_orig & validate">
</div>
<div class="form-group">
<label class="control-label" for="cal_name_tran">Translated name</label>
<input type="text" class="form-control" id="cal_name_tran" value.bind="calendar.cal_name_tran & validate">
</div>
</form>
Run Code Online (Sandbox Code Playgroud)
calendars.js(简化版):
import { inject, NewInstance } from 'aurelia-dependency-injection';
import { ValidationController, ValidationRules } from 'aurelia-validation';
import { BootstrapFormRenderer } from '../../common/bootstrap-form-renderer';
@inject(NewInstance.of(ValidationController))
export class CalendarForm {
controller = null;
constructor(controller) {
this.controller = controller;
this.controller.addRenderer(new BootstrapFormRenderer());
this.calendar = {
cal_name_orig = "",
cal_name_tran = …Run Code Online (Sandbox Code Playgroud) 我正试图在Aurelia中对象属性发生变化时设置监视.我之前没有使用过observables所以请帮助我.基于文档,这是我认为可行的,但我怀疑点是丢弃函数名称或可观察的.
export class EventEdit {
record = {
ev_date_start,
ev_date_end,
ev_description
};
@observable record.ev_date_start;
record.ev_date_startChanged(newValue, oldValue) {
console.log("ev_date_start changed from " + oldValue + " to " + newValue);
}
}
Run Code Online (Sandbox Code Playgroud)
当我更改ev_date_start的值时没有任何反应.
我是Aurelia的新手,但到目前为止真的很享受.但是,文档仍然缺乏某些方面,比如使用i18n插件进行本地化.
我设置了语言文件(translation.json)并将语言文本标签插入到HTML模板中,但我看到了两种不同的格式.我已经成功地工作但我不知道每个的优点和缺点所以我犹豫是否要承诺更新我的所有模板,除非我知道哪个是最好的和为什么.
区域设置/ EN/translation.json
{
"hello": "Hello, World!",
"lang_msg": "This message is in English."
}
Run Code Online (Sandbox Code Playgroud)
区域设置/ ES/translation.json
{
"hello": "¡Hola, Mundo!",
"lang_msg": "Este mensaje está en español."
}
Run Code Online (Sandbox Code Playgroud)
模板格式1:
<template>
<h1>${ 'hello' | t }</h1>
<h2>${ 'lang_msg' | t }</h2>
</template>
Run Code Online (Sandbox Code Playgroud)
模板格式2:
<template>
<h1><span t="hello"></span></h1>
<h2><span t="lang_msg"></span></h2>
</template>
Run Code Online (Sandbox Code Playgroud)
我应该使用模板格式1还是2?为什么?
我正在 Aurelia 开展一个项目并使用 aurelia-i18n 插件。到目前为止,它看起来很棒,翻译正在工作,并且当我更改区域设置时会立即更新界面语言。
问题:与单个翻译文件相比,使用多个翻译文件是否具有逻辑、组织或性能优势?例如:
我应该将所有内容都放入一个文件中吗?
my-aurelia/locales/en/translation.json
my-aurelia/locales/es/translation.json
Run Code Online (Sandbox Code Playgroud)
或者我应该分成多个翻译文件?
my-aurelia/locales/en/nav.json
my-aurelia/locales/en/words.json
my-aurelia/locales/en/phrases.json
my-aurelia/locales/es/nav.json
my-aurelia/locales/es/words.json
my-aurelia/locales/es/phrases.json
Run Code Online (Sandbox Code Playgroud)
以下是我如何实例化此示例的插件(在my-aurelia/src/main.jsexport function configure(aurelia) {内 ,但我正处于一个重要的设计十字路口。
aurelia.use.plugin('aurelia-i18n', (instance) => {
// register backend plugin
instance.i18next.use(XHR);
// adapt options to your needs (see http://i18next.com/docs/options/)
instance.setup({
backend: {
loadPath: '/locales/{{lng}}/{{ns}}.json',
},
lng : 'es',
ns: ['words','phrases','nav'],
defaultNS: 'words',
attributes : ['t','i18n'],
fallbackLng : 'en',
debug : false
});
});
Run Code Online (Sandbox Code Playgroud)
一个json语言文件还是多个json语言文件?还有其他建议吗?
我有一个主应用程序路由器和多个子路由器。我希望可以选择在从父路线导航时指定要打开的子路线。
父路由器:
configureRouter(config, router) {
this.router = router;
config.map([
{ route: ['','home'], name: 'home', moduleId: 'home/home' },
{ route: 'students/:id?', name: 'students', moduleId: 'students/students' },
{ route: 'staff', name: 'staff', moduleId: 'staff/staff' }
]);
}
Run Code Online (Sandbox Code Playgroud)
学生子路由器:
export class Students {
configureRouter(config, router) {
config.map([
{ route: ['', 'home'], name: 'student-home', moduleId: 'students/students-home' },
{ route: 'list', name: 'student-list', moduleId: 'students/student-list' },
{ route: 'profile/:id', name: 'student-profile', moduleId: 'students/profile/overview' },
{ route: 'lockers', name: 'student-lockers', moduleId: 'students/lockers/home' }
]);
this.router = …Run Code Online (Sandbox Code Playgroud)