使用淘汰赛,我可以动态更改表格行的模板,这样当我点击它时,使用编辑模板可以编辑行.没有导航,没有路由,只是为行分配一个新模板.我怎么在aurelia做这个？
我想询问是否有一步一步的方法来使用或配置与Aurelia的materializecss.我目前能够运行我的Aurelia应用程序,直到我的index.html看起来像这样的教程:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="jspm_packages/github/dogfalo/materialize@0.97.0/dist/css/materialize.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title></title>
</head>
<body aurelia-app>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
我目前正在使用ASP .NET 5 Preview空模板和jspm来安装Aurelia.我已经安装了materializecss jspm install github:dogfalo/materialize并从这个链接复制了一些HTML代码来测试它是否有效.
这段代码进入了我的app.html文件
<template>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</template>
而我的app.html文件有这个测试
export …App.js
export class App {
constructor() {
this.widgets = [{ name: 'zero'}, {name: 'one'}, {name:'two'}];
this.shipment = { widget: this.widgets[1] };
}
}
App.html
<template>
<require from="./widget-picker"></require>
<require from="./some-other-component"></require>
<widget-picker widget.bind="shipment.widget" widgets.bind="widgets"></widget-picker>
<some-other-component widget.bind="shipment.widget"/>
</template>
窗口小部件,picker.js
import {bindable, bindingMode} from 'aurelia-framework';
export class WidgetPicker {
@bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'widgetChanged' })
widget;
@bindable widgets;
widgetChanged(widget) {
// Use an Event Aggregator to send a message to SomeOtherComponent
// to say that they should check their widget binding for updates. …我有一个列表,我绑定到一个选择,依赖于另一个绑定到不同选择的值.它们与ValueConverter捆绑在一起:
<option repeat.for="site of sites | filter: { project: project }">
${site.name}
</option>
现在,这可能会过滤掉所有内容.在这种情况下,我想显示一个选项'No Sites Available'.我尝试过做一个性感的css方法:
<option class="if-empty">No Sites Available</option>
.if-empty {
display: none;
}
.if-empty:only-child {
display: initial;
}
唯一的问题是当从空切换 - >非空,但不是列表中的选项时,在选择中仍然选择"无可用站点"选项.我需要摆脱它.接下来的想法是利用Aurelia的if.bind,但我似乎无法绑定ValueConverter的输出(出于显而易见的原因).
<option if.bind="sites == null | filter: { project: project }">No Sites Available</option>
我有一个名为Infrastructure的类,我认为它可以很方便地继承HttpClient.这个类公开了get,post,put和delete的方法.
import {Aurelia} from "aurelia-framework";
import {HttpClient, json} from "aurelia-fetch-client";
export default class Infrastructure extends HttpClient {
get(url, queryString, contentType) {
//..
}
post(url, data, contentType) {
//..
}
put(url, data, contentType) {
//..
}
delete(url, contentType) {
//..
}
}
我的想法是,我现在可以拥有注入的服务,Infrastructure他们可以调用configure基础设施
import {inject} from "aurelia-framework";
import Infrastructure from "./infrastructure";
@inject(Infrastructure)
export class InventoryService {
constructor (infrastructure) {
infrastructure.configure(config => {
config
.useStandardConfiguration()
.withBaseUrl(`http://localhost:64441/inventory`);
});
this.infrastructure = infrastructure;
}
}
我有几个使用Infrastructure这样的服务,一切正常.问题是我不需要将两个 …
javascript dependency-injection ecmascript-6 aurelia aurelia-http-client
我有一个表customerlement与以下tbody规范:
<tbody class="ui-datatable-data ui-widget-content">
<tr ref="rowElement" repeat.for="rowData of dataToRender" class="ui-widget-content ${$odd ? 'ui-datatable-odd':'ui-datatable-even'} ${(selectionMode && rowElement == hoveredRow) ? 'ui-state-hover':''}" mouseenter.trigger="hoveredRow = $event.target" mouseleave.trigger="hoveredRow = null" click.trigger="onRowClick($event, rowData,$index)">
<td repeat.for="col of columns" attr.style.bind="col.style" attr.class.bind="col.styleClass" class="${col.editable ? 'ui-editable-column':''}" click.trigger="switchCellToEditMode($event.target)">
<span class="ui-column-title" if.bind="responsive">${col.header}</span>
<span class="ui-cell-data" click.trigger="switchCellToEditMode($event.target)">${rowData[col.field]}</span>
<input type="text" class="ui-cell-editor ui-state-highlight" if.bind="col.editable" value.bind="rowData[col.field]" blur.trigger="switchCellToViewMode($event.target)" keydown.trigger="onCellEditorKeydown($event)" />
</td>
</tr>
</tbody>
而keydown触发器:
onCellEditorKeydown(event) {
if (this.editable) {
if (event.keyCode == 13) {
this.switchCellToViewMode(event.target);
}
}
}
但是keydown.trigger使输入无法写入.通过移除触发器,它正常工作.
这里有什么我想念的吗？
br hw
我在同一页面上有两个视图.视图A的视图模型需要在视图B的视图模型中调用方法.Aurelia有可能吗？
另外,这是最好的方法吗？使用EventAggregator(pub/sub)在视图模型之间进行通信会更好吗？
- - - 更多细节 - - -
更具体一点,我的app.html文件中使用了一个导航栏,如下所示:
<template>
<require from="nav-bar-view"></require>
<nav-bar-view></nav-bar-view>
<router-view></router-view>
</template>
路由器视图中的视图模型需要能够更改导航栏的标题和按钮文本.
我最初的设计是使用pub/sub将更改传达给导航栏视图模型.由于这看起来有点混乱和过于复杂,我想提出一个更简单的方法.
我的最新想法是创建一个单独的NavBar类,它注入到NavBarView类和"消费者"视图模型中.
以下是代码的简化版本:
NAV-BAR-view.html:
<template>
<div class="center">${navBar.title}</div>
</template>
NAV-BAR-view.js:
import {inject} from 'aurelia-framework';
import {NavBar} from 'nav-bar';
@inject(NavBar)
export class NavBarView {
constructor(navBar) {
this.navBar = navBar;
}
}
NAV-bar.js:
import {singleton} from 'aurelia-framework';
@singleton()
export class NavBar {
constructor() {
this.title = '';
}
}
view.js(导航栏的消费者):
import {inject} from 'aurelia-framework';
import {NavBar} from 'nav-bar';
@inject(NavBar)
export class View {
constructor(navBar) {
this.navBar …我正在将一个Angular app移植到Aurelia作为学习练习,我不知道如何重新创建Angular ng-change行为.
有一个元素,当更改时触发javascript回调.我不知道如何在Aurelia做到这一点.或者我应该只使用HTML5？
我正在构建一个拖放工作区，类似于您发现的用于制作模型的工作区。我有一个工作区自定义元素，它有一个更大的嵌套元素，可以缩放和平移。因此，我需要仔细跟踪工作区的大小和位置数据以及所有包含的元素。
在我的自定义元素的附加事件中，我以编程方式将工作区的高度和宽度设置为 JavaScript 对象，该对象绑定到视图中的 css：
工作区CustomElement.js
export class WorkspaceCustomElement {
constructor(element) {
this.element = element;
}
attached() {
this.workspace.size = {
height: this.element.height * 5,
width: this.element.width * 5
}
}
}
工作空间CustomElement.html
<div css="height: ${workspace.height}px; width: ${workspace.width}px;
left: ${(element.clientWidth - workspace.width)/2}px;
top: ${(element.clientHeight - workspace.height)/2}px;"></div>
现在我在尝试获取子元素的位置时遇到了问题。我也在它们上面附加了回调，但是它们在上面附加的回调之前被评估，所以 css 绑定没有被评估，并且大小和位置是错误的。
我需要添加一个回调后的attached()进行了评估，并绑定已更新。我可以通过使用setTimeouthack来实现这一点，但我不相信这会一直有效。
attached() {
this.workspace.size = {
height: this.element.height * 5,
width: this.element.width * 5
}
setTimeout(() => {
let components …我似乎有一个奇怪的错误,我不确定这是否是我的假设在这里是否不正确,但没有关于这个主题的文档.
因此,当您创建自定义元素/属性并在该类上设置成员时,它们是按使用的,因此这些自定义attr/elements的每次使用都将拥有自己的类实例.
但是,目前似乎在使用绑定行为时,该类在该绑定行为的所有使用之间共享,该bind方法是隔离点.
我这样说是因为我假设他们都被设置为每次使用的实例,在这种情况下,一些异步逻辑从类上的最后一次使用的绑定行为中得到一个值,即this.someClassStateVar.
那么任何人都可以确认Aurelia是否在单例范围内使用绑定行为？
===编辑===
基于第一个答案,我想确认一下情景:
<section with-binding.bind="something">
<input value.bind="somethingElse & someBindingBehaviour">
<input value.bind="somethingElse2 & someBindingBehaviour">
</section>
所以我期待有2个someBindingBehaviour类的实例,每个都适用于相关的输入,但我看到的行为是它们都使用相同的someBindingBehaviour类实例.