Angular 到 Aurelia 的过渡 - 一些基本问题

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 中特定点的作用域）。我想知道撰写和自定义元素中的“范围”（即可用于绑定表达式）中有什么。我的意思是，子模板中是否有父视图模型？如果是这样，子视图模型属性是否隐藏/隐藏父视图模型属性？

考虑以下标记：

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> 作为通配符声明。所以不用像<my-component></my-component>那样声明web组件，你可以这样做

<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>

希望这会有所帮助！