gpt4 book ai didi

javascript - 使用 Aurelia 的 ref 属性引用元素的 View 模型

转载 作者:行者123 更新时间:2023-11-29 18:03:37 26 4
gpt4 key购买 nike

Aurelia 提供了 ref attribute除其他外,它应该能够提供对自定义元素的 View 模型的引用。

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

正如预期的那样:

  • 在生产者文本框中键入调用 producerInput,设置新值。
  • producerOutput 被重复轮询,因为到 consumerInput 的绑定(bind)应该更新。
  • consumerOutput 被重复轮询,因为消费者文本框的绑定(bind)应该更新。

但是 consumerInput 没有被调用。如果我理解正确,它应该在每次调用 producerOutput 后被调用。 consumerInput 未被调用意味着该值未通过管道传输到消费者文本框。为什么 consumerInput 没有被调用,我该如何解决?

引用.html

<template>

<require from="producer"></require>
<require from="consumer"></require>

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

</template>

引用.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;
}

}

消费者.html

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

消费者.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>

引用.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;

}

消费者.html

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

消费者.js

import {bindable} from 'aurelia-framework';

export class Consumer {

@bindable input;

}

最佳答案

DOM 自动将所有属性小写。您不能将 consumerInputproducerOutput 用作可绑定(bind)属性名称。 Aurelia 使用一种约定,将具有混合大小写的可绑定(bind)属性名称连字符连接起来。

例如,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.
}
}

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

关于javascript - 使用 Aurelia 的 ref 属性引用元素的 View 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33085729/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com