使用Aurelia,是否可以使用变量名来动态引用模型对象的属性名？
使用Javascript:
dow = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
test = {
monday: false,
tuesday: false,
wednesday: false,
thursday: false,
friday: false,
};
HTML:
<label repeat.for="day of dow"><input type="checkbox" class="form-control" checked.bind="test[day]" />${day}</label>
这导致:"TypeError:obj未定义"
我正在使用Aurelia基于json构建动态表单.表单是从json生成的,如下所示:
Schema = [{
'key': 'Name',
'display': 'Name',
'type': 'text',
'placeholder': 'Name',
'required': true
},
{
'key': 'IsSubscribed',
'display': 'Subscribed to newsletter?',
'type': 'checkbox',
'placeholder': null,
'required': false
}];
填写表单的模型可通过Web API服务获得.所以,我成功使用以下模板.
<template>
<section class="au-animate">
<h2>Edit Form</h2>
<form class="form-group">
<div repeat.for="item of Schema" class="form-group">
<label if.bind="item.type === 'text' || item.type === 'checkbox'" class="control-label" for.bind="item.key">${item.display}
<input class="form-control" id.bind="item.key" placeholder.bind="item.placeholder" type.bind="item.type" value.bind="Model[item.key]" />
</label>
<label if.bind="item.type === 'textarea'">${item.display}
<textarea placeholder.bind="item.placeholder" value.bind="Model[item.key]></textarea>
</label>
...
</div>
</form>
</section>
</template>
当模型包含另一个对象作为属性时,我现在面临困难.例如,对于属性地址我想要一个City的输入框.
因此,item.key = "Address.City". …
我有一个包含6个视图(html)的项目.每个视图都有一个对应的视图模型(.js)和一个仅适用于该视图的样式表(.css)
aurelia-cli可以很好地通过我的文件递归递归并将所有.js和.css文件捆绑到几个文件中,以便在减少页面加载时间和大小的同时引用它们.因此,如果我有一个带welcome.html,welcome.js和welcome.css的欢迎文件夹,我可以使用以下内容加载welcome.html的CSS,<require from="./welcome.css"></require>并<head></head>在页面加载时将CSS注入到标记中.
问题是当我导航到下一个视图时,来自welcome.html/welcome.css的CSS规则仍然在<head>网页的标记内,因此仍然被强制执行.在我的应用程序中访问了所有6个视图后,我现在在<style>标记中有6个标记<head>,所有六个页面中的所有规则都在我去的每个页面上强制执行,直到刷新页面为止没有卸载.毋庸置疑,在访问了几页后,整个网站变得混乱垃圾.
所以我的问题是
如果我有一个10页的应用程序,其中包含全局样式表,bootstrap,动画css和字体真棒,那么在一天结束时,我会将14个冲突的样式永久注入到html中,其余的应用程序将被注入.
有什么建议？
javascript aurelia aurelia-binding aurelia-cli aurelia-bundling
我在文档中看到了这个功能,但我无法弄清楚如何从该信息中使用它.
它说:
<i-produce-a-value ref.view-model="producer"></i-produce-a-value>
<i-consume-a-value input.bind="producer.output"></i-consume-a-value>
这在现实世界的例子中是什么样的？
我有一个名为的页面entry-main,它包含以下模板:
<template>
<entry-search></entry-search>
<entry-details></entry-details>
</template>
里面<entry-search>有另一个自定义元素.它看起来像这样:
<template>
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<span id="entry_search" class="input-group-addon">
<span class="fa fa-search"></span>
</span>
<!-- important part -->
<typeahead id="choose" placeholder="Holding the place"></typeahead>
<!-- end of important part -->
</div>
</div>
</div>
</template>
在typeahead viewmodel中,我得到了我的typeahead的值,如下所示:
$(this.id).on('typeahead:selected', function (e, item) {
this.selected = item;
});
我现在的问题是,如何this.selected从我的entry-details-viewmodel中获取我的typeahead-viewmodel？
为了清楚起见,它应该是这样的:
<entry-main>
<entry-search>
<typeahead></typeahead>
</entry-search>
<entry-details>
${selected}
</entry-details>
</entry-main>
我们有这样的模板.
该-template.html
<template><div>${Foo}</div></template>
我们想用它来做这件事.
一些-file.ts
let htmlString = makeItHappen('the-template.html', { Foo = 'bar' });
console.info(htmlString); // <div>bar</div>
什么是我们的makeItHappen功能？
我和队友在过去的四个月里一直在Aurelia建立一个应用程序,他和我一直在以这两种不同的方式创建和使用组件.我希望有一些一致性并将所有内容改为两种风格中的一种,但我不知道哪种风格更适合我们的需求.
我选择使用<compose>因为对我来说它感觉更干净,适合我遇到的每一个需求,但如果使用自定义元素客观上更好,我想切换到那个.
例如:
(他的观点模型:)
import { bindable, bindingMode } from 'aurelia-framework';
export class HisWay {
@bindable({ defaultBindingMode: bindingMode.twoWay }) data;
}
(他的观点:)
<require from="./his-way"></require>
<his-way data.two-way="myModel" containerless></project-name>
(我的观点模型:)
export class MyWay {
activate(model) {
this.model = model;
}
}
(我的方式:)
<compose view-model="./my-way" model.bind="myModel" containerless></compose>
我是否需要转换,如果没有,我可以用什么理由来说服他使用我一直使用的相同风格？
我正在尝试将DOM元素传递给Aurelia函数,但它不起作用.只是注意到这个元素不在'repeat.for'语句中.
我有这样的东西,显然是不正确的:
<span click.trigger="passDom(d)">Pass Dom Element</span>
export class Test {
passDom(d) {
console.log(d);
}
}
我尝试使用$ self,但不能正常工作.
目标是能够在SharedParent和/或SharedState视图中更新"heading",只要它从子项通过DI更改.
我怀疑layout-view和layout-view-modelAurelia路由器自定义元素有问题.
我需要这个,因为真实代码中的SharedParent,将是抽象的一般计算函数(保存在SharedParent中的变量,当前未在视图中更新)等孩子们将调用(以避免每个孩子复制此功能) ).理想情况下引用SharedParent的DI引用.
理想的解决方案可以直接修改父级.SharedState只是一种额外的测试方式,如果你能看到一种方法让它与选项1一起使用,可以忽略它
选项1是我工作的最高优先级
在这里查看实时运行要点:https://gist.run/？ id = 66eeff540a4665694a31482b790bf01e
更新
我已经制作了另一个要点,以显示我为了使父/子关系正常工作而尝试的另一种方式:https://gist.run/？id = 080d4ac3f4d8677d344140a7827aea94 - 在这个例子中,当前路线只是另一个问题由于路由器中的重复"路由"属性,未正确设置.但在这里,至少我们能够从子节点更新父属性.理想的解决方案是同时使用1个解决方案.这样就可以正确设置活动路径,并且子项将能够更新依赖注入父项的属性.最后,父视图需要刷新此更改.这个要点来自另一个问题:如何从链接到父/子视图/控制器的路径动态构建导航菜单 - 但稍微修改以帮助说明在这个问题中没有用的东西,确实在这里工作.
把它们加起来.
我首先尝试用这种方式解决我的问题:https://gist.run/？id = 080d4ac3f4d8677d344140a7827aea94 - 几乎所有的工作都应该如此(从孩子的父级设置标题)并在子视图中反映父母的日期/语言的变化 - 从子节点获取和设置父属性.唯一不起作用的是路由.我无法显示活动路由,因为多个路由共享相同的"路由"属性.
所以我看向布局视图(-model)解决方案(我在这个问题中提出的那个) - 这似乎解决了路由问题,但打破了父/子之间的绑定.
我正在构建一个Aurelia自定义元素,我想使用一个特殊的绑定行为,但我似乎无法在我的自定义元素类之外使用它(声明它).另外,我想知道Aurelia中是否存在绑定行为和其他自定义内容的命名空间？
这是我想要使用的绑定行为
optional-binding.js - 由另一个堆栈问题提供的代码
export class OptionalBindingBehavior {
bind(binding, scope, interceptor) {
binding.originalupdateTarget = binding.updateTarget;
binding.originalTargetProperty = binding.targetProperty;
binding.updateTarget = val => {
if (val === undefined || val === null || val === '') {
binding.targetProperty = null;
} else {
binding.targetProperty = binding.originalTargetProperty;
}
binding.originalupdateTarget(val);
};
}
unbind(binding, scope) {
binding.updateTarget = binding.originalupdateTarget;
binding.originalupdateTarget = null;
binding.targetProperty = binding.originalTargetProperty;
binding.originalTargetProperty = null;
}
}
我试着用这种方式导入
index.js
import {MyCustomElement} from './my-element';
import './optional-binding.js';
export function configure(aurelia) {
aurelia.globalResources('./my-element'); …aurelia ×10
aurelia-binding ×10
javascript ×6
ecmascript-6 ×2
aurelia-cli ×1
json ×1
typescript ×1