Question

我有一个名为summary-bar的自定义元素summary属性：

export class SummaryBarCustomElement {
    @bindable summary;
    ---

在另一个组件test-website中，我使用summary-bar元素并将其数据绑定如下：

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

此处testWebsiteSummary在test-website.js ViewModel：

中定义

export class TestWebsiteCustomElement {

    testWebsiteSummary = {
        passed_result_count: 0,
        failed_result_count: 0,
        incomplete_result_count: 0,
        unknown_result_count: 0
    }
    ---

TestWebsiteCustomElement类中有几个函数可以修改testWebsiteSummary.passed_result_count，testWebsiteSummary.failed_result_count，testWebsiteSummary.incomplete_result_count和testWebsiteSummary.unknown_result_count的值。但是，summary-bar元素不会使用testWebsiteSummary的新值重新加载。有没有办法实现这一目标？我的意思是每次更新testWebsiteSummary的属性时，是否可以使用新值更新summary-bar？谢谢。

更改属性的函数示例：

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

Answer 1

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

现在，如果你想要知道什么时候发生这些变化，那么你需要使用propertyObserver。

Aurelia默认支持向自定义元素添加summaryChanged（newValue，oldValue）等方法。这适用于原始值，但对于Objects（或数组），如果任何内部属性发生更改，则只有在重新分配了对象本身时才会触发此方法。

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

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

Answer 2

您可以使用signal绑定行为

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

上课：

import {BindingSignaler} from 'aurelia-templating-resources';
export class TestWebsiteCustomElement {

    constructor(signaler: BindingSignaler) {
      this.signaler = signaler;
    }

    functionThatChangesValues(){
      this.signaler.signal('your-signal');
    }
}

Aurelia：更新绑定对象更改的自定义元素

2 个答案: