Question

我们正在考虑将Aurelia用于新应用。我来自Angular 1背景（有一些暴露于Angular 2）。 Aurelia看起来相当不错，我真的很喜欢他们承担维护开发人员工作流程的责任。但是我有一些问题似乎无法找到答案：

1）有两种常规方法（据我所知），可以在页面中包含Web组件。这些是<compose>并编写自定义元素。我的问题是，来自Angular的重点是范围（即DOM中特定点的范围）。我想知道具有组合和自定义元素的“范围”（即可用于绑定表达式）是什么。我的意思是，子模板中是否有父视图模型？如果是这样，子视图模型属性是否隐藏/隐藏父视图模型属性？

2）在Angular 2中，有关于数据如何传入和传出组件的指导原则。我们不应该更改绑定到组件的非基元（因为这会强制Angular 2的更改检测始终进入该组件分支以检查所有属性）。

是否有任何指南/信息可以将数据传入和传出Aurelia中的组件？我的意思是从阅读中我已经完成它听起来就像我只使用value.bind绑定到所有@bindable属性。那是对的吗？这些双向绑定是默认还是我必须明确声明value.two-way？更改双向绑定对象的属性有什么问题吗？

提前致谢

Answer 1

很棒的问题 - 这里有一些信息：

1）有两种常规方法（据我所知），可以在页面中包含Web组件。这些是<compose>并编写自定义元素。我的问题是，来自Angular的重点是范围（即DOM中特定点的范围）。我想知道什么是＆＃34;范围＆＃34; （即可用于绑定表达式）在compose和custom元素中。我的意思是，子模板中是否有父视图模型？如果是，那么子视图模型属性是否隐藏/隐藏父视图模型属性？

考虑以下标记：

<强> app.html

<template>
  <h1>${message}</h1>

  <date-picker value.bind="startDate"></date-picker>

  <compose view="footer.html"></compose>
<template>

<compose>保留对外部作用域的访问权限。当footer.html中包含的模板受数据限制时，它可以访问app.html绑定的任何内容例如，它可以访问message属性。

自定义元素的模板无法访问外部作用域。自定义元素旨在封装和移植。因此，不允许它们访问外部作用域，从而阻止开发人员创建期望在特定绑定上下文中使用的自定义元素。将数据输入/输出自定义元素的主要方法是通过@bindable属性（类似于XAML中的依赖项属性）。

2）在Angular 2中，有关于数据如何传入和传出组件的指导原则。我们不应该更改绑定到组件的非基元（因为这会强制Angular 2的更改检测始终进入该组件分支以检查所有属性）。

是否有任何指南/信息可以将数据传入和传出Aurelia中的组件？我的意思是从阅读中我已经完成它听起来就像我只使用value.bind绑定到所有@bindable属性。这是对的吗？

<强>正确

默认情况下这些双向绑定还是我必须明确声明value.two-way？更改双向绑定对象的属性有什么问题吗？

Aurelia会自动为内置元素的属性选择正确的默认绑定模式，如输入或选择。如果您需要one-way以外的其他内容，则需要指定自定义元素的默认值。以下是如何做到这一点：

import {bindingMode} from 'aurelia-framework'; // or 'aurelia-binding';

export class DatePicker {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) value;  // <----
  @bindable min = new Date(1900, 0, 1);
  @bindable max = new Date(2250, 11, 31);
  ...
}

Answer 2

您可以使用<compose>作为通配符声明。因此，而不是声明Web组件，例如<my-component></my-component>，您可以执行

<compose view-model.bind="variableContainingModel" model.bind="variableContainingViewModelPath"></compose>

或只是

<compose view-model="./my-component.html" model="./my-component.js"></compose>

Jeremy Danyow的回复

compose标记保留对外部范围的访问。当模板   是数据绑定的，它可以访问其父级属性。

自定义组件可以查看其视图模型中声明的所有属性。如果要将任何父视图模型对象共享到组件，则可以使用可绑定属性。

import {bindable} from 'aurelia-framework';
export class MyComponent {
   @bindable propertyFromMyParent;
}

视图：

<template>
   <div>${propertyFromMyParent}</div>
</template>

//parent call
<my-component propertyFromMyParent.bind="someProperty"></my-component>

默认情况下，可绑定属性是单向的。您可以使用以下方法覆盖：

import {bindable, bindingMode} from 'aurelia-framework';
@bindable({ defaultBindingMode: bindingMode.twoWay }) propertyFromMyParent

还有content标签非常有用：

<template>
   <content></content>
</template>

//parent call
<my-component>Some Content Here</my-component>

希望这有帮助！

Angular to Aurelia Transition - 一些基本问题

2 个答案: