使用 Aurelia 的 ref 属性引用元素的视图模型答案

【问题标题】：Referencing view-model of element using Aurelia's ref attribute使用 Aurelia 的 ref 属性引用元素的视图模型
【发布时间】：2016-12-20 23:46:44
【问题描述】：

Aurelia 提供了ref attribute，其中应该能够提供对自定义元素的视图模型的引用。

我正在尝试构建一个示例，其中一个文本框（生产者）的值通过管道传输到另一个只读文本框（消费者）。

如预期：

输入生产者文本框调用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 {

}

生产者.html

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

生产者.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 {

}

生产者.html

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

生产者.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;

}

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

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

生产者自定义元素需要进行类似的更改。

【讨论】：