Aurelia：在对绑定对象进行更改时更新自定义元素

我有一个自定义元素，名为

摘要栏

，具有

摘要

属性：

export class SummaryBarCustomElement {
    @bindable summary;
    ---

在另一个组件

测试网站

中，我使用

摘要栏

元素并按如下方式绑定其数据：

<summary-bar summary.bind="testWebsiteSummary"></summary-bar>

TestWebsiteCustomElement类中有几个函数可以修改

TestWebsiteSummmary.passed\u result\u count

，

TestWebsiteSummmary.failed\u result\u count

，

TestWebsiteSummmary.unknown\u result\u count

的值。但是，

摘要栏

元素不会用

testwebsitesummmary

的新值重新加载。有没有办法做到这一点？我的意思是每次更新

testwebsitesummmary

的属性时，是否可以用新值更新

摘要栏

？多谢各位

更改属性的函数示例：

 changeWebsiteSummary(status) {
    switch (status) {
        case "SUCCESS":
        this.testWebsiteSummary.passed_result_count++;
        this.testWebsiteSummary.incomplete_result_count--;
        break;
        case "INCOMPLETE":
        this.testWebsiteSummary.incomplete_result_count++;
        this.testWebsiteSummary.passed_result_count--;
        break;
        default:
    }
}

---

您可以使用

信号

绑定行为

<summary-bar summary.bind="testWebsiteSummary & signal:'your-signal'"></summary-bar>

---

您可以使用

信号

绑定行为

<summary-bar summary.bind="testWebsiteSummary & signal:'your-signal'"></summary-bar>

---

将对象绑定到自定义元素时，它将自动更新其值。每当TestWebsiteCustomElement更改testWebsiteSummary中的任何属性时，这些更改将自动反映在SummaryBarCustomElement中。也就是说，如果您正在SummaryBarCustomElement视图中显示testWebsiteSummary.passed\u result\u计数，那么它将在ui中自动更新

现在，如果您想知道这些更改何时发生以执行其他操作，那么您需要使用propertyObserver

默认情况下，Aurelia支持向自定义元素添加summaryChanged（newValue、oldValue）等方法。这对于基本体值来说效果很好，但对于对象（或数组），如果任何内部属性发生更改，则不会触发此方法，仅当对象本身已重新分配时才会触发

要解决这个问题，您可以使用绑定引擎来观察摘要对象中的特定属性。下面是它的样子：

import {bindable, BindingEngine, inject} from 'aurelia-framework';

@inject(BindingEngine)
export class SummaryBarCustomElement {
  @bindable summary;

  constructor(bindingEngine){
    this.bindingEngine = bindingEngine;
  }

  bind(){
    this.subscription = this.bindingEngine.propertyObserver(this.summary, 'passed_result_count')
      .subscribe(newValue, oldValue => this.passedResultCountChanged(newValue, oldValue))
  }

  detached(){
    this.subscription.dispose();
  }

  passedResultCountChanged(newValue, oldValue){
    //Do something
  }
}

---

将对象绑定到自定义元素时，它将自动更新其值。每当TestWebsiteCustomElement更改testWebsiteSummary中的任何属性时，这些更改将自动反映在SummaryBarCustomElement中。也就是说，如果您正在SummaryBarCustomElement视图中显示testWebsiteSummary.passed\u result\u计数，那么它将在ui中自动更新

现在，如果您想知道这些更改何时发生以执行其他操作，那么您需要使用propertyObserver

默认情况下，Aurelia支持向自定义元素添加summaryChanged（newValue、oldValue）等方法。这对于基本体值来说效果很好，但对于对象（或数组），如果任何内部属性发生更改，则不会触发此方法，仅当对象本身已重新分配时才会触发

要解决这个问题，您可以使用绑定引擎来观察摘要对象中的特定属性。下面是它的样子：

import {bindable, BindingEngine, inject} from 'aurelia-framework';

@inject(BindingEngine)
export class SummaryBarCustomElement {
  @bindable summary;

  constructor(bindingEngine){
    this.bindingEngine = bindingEngine;
  }

  bind(){
    this.subscription = this.bindingEngine.propertyObserver(this.summary, 'passed_result_count')
      .subscribe(newValue, oldValue => this.passedResultCountChanged(newValue, oldValue))
  }

  detached(){
    this.subscription.dispose();
  }

  passedResultCountChanged(newValue, oldValue){
    //Do something
  }
}

---

谢谢看起来是正确的方法。但换了衣服后，我还是觉得不舒服。它对对象有效还是只对原始数据有效？嗯，也许我的答案不是你要找的那个。这段代码应该强制Aurelia检查绑定，我认为它应该与对象一起工作，我想你可以通过在TestWebsiteCustomElement中使用EventAggregator（包括更改的testWebsiteSummary）引发一个事件，在SummaryBarCustomElement中订阅它，并在子视图中更改值来实现这一点。但我不确定这条路是否正确。顺便说一句，我不知道为什么你的代码不起作用。这看起来是正确的做法。谢谢。看起来是正确的方法。但换了衣服后，我还是觉得不舒服。它对对象有效还是只对原始数据有效？嗯，也许我的答案不是你要找的那个。这段代码应该强制Aurelia检查绑定，我认为它应该与对象一起工作，我想你可以通过在TestWebsiteCustomElement中使用EventAggregator（包括更改的testWebsiteSummary）引发一个事件，在SummaryBarCustomElement中订阅它，并在子视图中更改值来实现这一点。但我不确定这条路是否正确。顺便说一句，我不知道为什么你的代码不起作用。这看起来是正确的方法。我也希望它能这样工作，但是当testWebsiteSummary的任何属性发生变化时，ui都没有更新。这很奇怪，你能提供一个plunker以便我们可以看到确切的示例吗？嗨，我添加了更新testWebsiteSummary属性的代码部分。即使代码运行了，ui也没有得到更新。你怎么知道它没有被更新？您是否在自定义元素视图中显示属性？摘要栏组件显示传递的\u结果\u计数、不完整的\u结果\u计数，但它没有更新我希望它也是这样工作的，但是当testWebsiteSummary的任何属性更改时，ui都没有更新。这非常奇怪，你能提供一个plunker让我们看到你的确切例子吗？嗨，我已经添加了更新testWebsiteSummary属性的代码部分。即使代码运行了，ui也没有得到更新。你怎么知道它没有被更新？是否在自定义元素视图中显示属性？摘要栏组件显示传递的\u结果\u计数、不完整的\u结果\u计数，但未更新