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

Question

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

1) 有两种一般方法(据我所知)可以在页面中包含 Web 组件。这些是 <compose>并编写自定义元素。我的问题是，Angular 非常强调作用域(即 DOM 中特定点的作用域)。我想知道“范围”中有什么(即可用于绑定(bind)表达式)与组合和自定义元素。我的意思是，子模板中是否有父 View 模型？如果是这样， subview 模型属性是否隐藏/隐藏父 View 模型属性？

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

在 Aurelia 的组件中传入和传出数据是否有任何指南/信息？我的意思是，从我读过的内容来看，听起来我只会使用 value.bind绑定(bind)到所有 @bindable特性。那是对的吗？这些是默认双向绑定(bind)还是我必须明确声明 value.two-way ？更改双向绑定(bind)对象的属性有什么问题吗？

提前致谢

Answer 1

很好的问题 - 这里有一些信息:

1) There are two general ways (as I understand) that one can include a web component in a page. These are <compose> and write a custom element. My question is, coming from Angular there is a big emphasis on scopes (i.e. what is in scope at a specific point in the DOM). I am wondering what is in "scope" (i.e. available to binding expression) within compose and custom elements. I mean, is a parent view-model available within a child template? If so, do child view-model properties hide/shadow the parent view-model properties?

考虑以下标记:

app.html

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

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

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

<compose>保留对外部范围的访问。 当模板包含在 footer.html 中时是数据绑定(bind)的，它可以访问任何app.html绑定(bind)到 - 例如，它可以访问 message属性(property)。

自定义元素的模板无法访问外部范围。自定义元素旨在进行封装和移植。因此，不允许他们访问外部范围，从而阻止开发人员创建期望在特定绑定(bind)上下文中使用的自定义元素。从自定义元素中获取数据的主要方式是通过 @bindable。属性(类似于 XAML 中的依赖属性)。

2) In Angular 2, there are guidelines with respect to how data is passed in and out of components. We are not supposed to change non-primitives that are bound to a component (because that forces Angular 2's change detection to always go into that component branch to check all properties).

Are there any guidelines/info to passing data in and out of components in Aurelia? I mean from the reading that I have done it sounds like I would just use value.bind to bind to all the @bindable properties. Is that correct?

正确

Are these two-way bound by default or do I have to explicitly declare value.two-way? Is there anything wrong with changing the properties of a two-way bound object?

Aurelia 自动为输入或选择等内置元素的属性选择正确的默认绑定(bind)模式。如果您想要 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);
  ...
}