Aurelia打印__observers__而不是对象 [英] Aurelia prints __observers__ instead of object

问题描述

我试图将对象从视图模型绑定到视图，如下所示:

I am trying to bind an object from the view-model to view as follows:

// welcome.js
export class Welcome {

constructor() {
    this.data = {
        a: "",
        b: "",
        c: ""
    }
}

submit() {
       console.log(this.data);
    }
}


// welcome.html
<form role="form" submit.delegate="submit()">
    <div class="form-group">
      <textarea class="form-control" value.bind="data.a" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

理想情况下，它应该仅打印data对象.但是，它将在控制台中输出以下输出.

Ideally, it should print only data object. However, it prints following output in the console.

我想知道什么是observers对象，以及如何仅访问data对象.谢谢你.

I would like to know what is observers object and how can I access only data object. Thank you.

推荐答案

简短答案:

__observers__对象是使Aurelia能够进行更改检测的原因，您不能摆脱它.如果您确实需要精确提取所需的内容，则需要手工完成.

Short answer:

The __observers__ object is what makes change detection possible for Aurelia, you cannot get rid of that. If you really need to extract precisely what you want then you need to do that by hand.

通常，当您在视图模型上定义一些数据时，开发人员通常不介意显式设置属性，而是使用字段符号，因为这更加简洁.但是，字段只是字段，在读取或分配时发生的情况不能更改 ¹ .

Normally, when you define some data on the viewmodel, developers typically don't mind setting up properties explicitly, they use the field notation instead, since this is more concise. However, fields are just fields, what happens on read or assignment cannot be altered¹.

只要通过任何方式绑定的属性(例如在模板插值(${ data.a })或绑定(<input value.bind="data.a" />)等中使用)改变了，那么Aurelia都需要一种通知方式，何时以及何时值会发生变化，以便它可以更新依赖它的任何内容，例如视图的一部分.

Whenever a property that is bound to by any means - such as using it in template interpolation (${ data.a }) or binding (<input value.bind="data.a" />), etc. - changes, then Aurelia needs a way of being notified if and when the value changes so it can update anything that relies on it, such as parts of your view.

由于 ¹ ，如果将某些内容定义为字段，则不可能.因此，Aurelia所做的是将类上的字段即时转换为属性，因为它们仍然允许x = 1表示法(处理字段时使用的表示法)，这与Java样式的get-set方法 (setX(1))使您的代码完全按预期工作，但它们还可以在getter和setter中执行任意逻辑.在将字段转换为属性的同时，还注入了自己的逻辑，只要值改变，它就会通知Aurelia.

Because of ¹, if something is defined as a field, it is not possible. So what Aurelia does is that it transforms fields on your classes on the fly into properties since they still allow the x = 1 notation (what you use when dealing with fields) unlike the Java-style get-set methods (setX(1)) letting your code work exactly as intended but they also enable executing arbitrary logic both in the getter as well as the setter. As it transforms the fields into properties, it also injects some logic of its own which notifies Aurelia whenever the value changes.

这就是为什么这些东西被添加到您的对象中，这就是为什么您不能摆脱它们的原因.为了使框架能够正常工作，它们是绝对必要的.

That's why those things are added to your object and that's why you cannot get rid of them. They are absolutely necessary to enable the framework to do its job.

当然，还有其他方法可以启用更改检测，但是每种方法都有其自己的怪癖.例如，在Angular中，这不是必需的，因为Angular会执行更改检查每当发生异步事件:

On a side note, of course, there are other ways to enable change detection, but each of them comes with its own quirks. For example, in Angular, this is not necessary, because what Angular does is it executes change checks whenever some asynchronous event occurs:

Angular在每个更改检测周期之后执行模板表达式.变化检测周期是由许多异步活动触发的，例如承诺解决方案，http结果，计时器事件，按键和鼠标移动.

Angular executes template expressions after every change detection cycle. Change detection cycles are triggered by many asynchronous activities such as promise resolutions, http results, timer events, keypresses and mouse moves.

当然，这带来了不同的复杂性，例如您需要不时编写这样的代码，然后只是设置一些值:

Of course, this comes with different complications, such as you need to write code like this every now and then just to set some value:

setTimeout(() => this.someVal = 0, 0);

在我看来这确实很hacky.

which is really hacky in my opinion.

因此，基本上，有两种方法可以使框架在发生更改时得到通知.一种是Aurelia方式，另一种是Angular方式.

So basically there are two ways for a framework to get notified when something changes. One is the Aurelia way and the other is the Angular way.

Aurelia方式会带来您要问的后果，也就是说，它会向您的对象中添加一些其他内容.

The Aurelia way comes with the consequences that you are asking about, that is, it adds some other stuff to your objects.

另一方面，Angular则需要如上所述的hacky解决方案，并且人们可能还会想知道响应大多数异步事件而进行更改检查对性能的影响.

Angular, on the other hand, necessitates such hacky solutions as above and one might also wonder about the performance implications of doing change checks in response of most async events.

这篇关于Aurelia打印__observers__而不是对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！