使用Aurelia's ref属性引用元素的视图模型

Referencing view-model of element using Aurelia's ref attribute

本文关键字：元素 引用 视图 模型 属性 ref Aurelia 使用      更新时间：2023-09-26

Aurelia提供了ref属性，该属性被认为能够提供对自定义元素视图模型的引用。

我正在尝试构建一个示例，其中一个文本框(生产者)的值管道到另一个只读文本框(消费者)。

按预期

:

  • 在生产者文本框中输入producerInput，设置新值。
  • producerOutput被反复轮询，因为与consumerInput的绑定需要更新。
  • consumerOutput被反复轮询，因为绑定到消费者文本框应该更新。

然而consumerInput没有被调用。如果我理解正确的话，它应该在每次调用producerOutput之后被调用。没有调用consumerInput意味着该值没有通过管道传递到消费者文本框。为什么不调用consumerInput，我如何修复它?

ref.html 

<template>
    <require from="producer"></require>
    <require from="consumer"></require>
    <producer producer.ref="producerViewModel"></producer>
    <consumer consumerInput.bind="producerViewModel.producerOutput"></consumer>
</template>

ref.js 

export class Ref {
}

producer.html 

<template>
    <div>
        producer: <input value.bind="producerInput" />
    </div>
</template>

producer.js 

import {customElement} from 'aurelia-framework';
@customElement('producer')
export class Producer {
    set producerInput(v) {
        this.value = v;
    }
    get producerOutput() {
        return this.value;
    }
}

consumer.html 

<template>
    <div>
        consumer: <input value.bind="consumerOutput" readonly />
    </div>
</template>

consumer.js 

import {customElement, bindable} from 'aurelia-framework';
@customElement('consumer')
@bindable('consumerInput')
export class Consumer { 
    set consumerInput(v) {
        this.value = v;
    }
    get consumerOutput() {
        return this.value;
    }
}

更新后的工作方案:

ref.html: 

<template>
    <require from="producer"></require>
    <require from="consumer"></require>
    <producer producer.ref="producerViewModel"></producer>
    <consumer input.bind="producerViewModel.output"></consumer>
</template>

ref.js 

export class Ref {
}

producer.html 

<template>
    <div>
        producer: <input value.bind="output" />
    </div>
</template>

producer.js 

import {bindable} from 'aurelia-framework';
export class Producer {
    @bindable output;
}

consumer.html 

<template>
    <div>
        consumer: <input value.bind="input" readonly />
    </div>
</template>

consumer.js 

import {bindable} from 'aurelia-framework';
export class Consumer { 
    @bindable input;
}

DOM自动将所有属性小写。不能使用consumerInput或producerOutput作为可绑定的属性名。Aurelia使用一种惯例，将混合大小写的可绑定属性名连字符连接起来。

例如，class MyElement { @bindable fooBar }可以这样使用:

<my-element foo-bar.bind="baz"></my-element>

试试这个:

import {customElement, bindable} from 'aurelia-framework';
@customElement('consumer')
export class Consumer { 
    @bindable input;
    inputChanged(newValue, oldValue) {
      // aurelia will call this automatically- a convention looks for methods on the vm that match bindable property names.
    }
}

对于生产者自定义元素也需要进行类似的修改。

相关文章：