从视图模型调用自定义属性方法

Question

我有一个自定义属性，其中包含显示和隐藏某些 HTML 内容的方法，我已将该属性附加到视图模型中的元素。

如何从视图模型调用自定义属性中定义的方法？

Answer 1

要访问自定义属性的视图模型，只需再次将自定义属性放在元素上，但这次放在.ref="viewModelPropertyName"属性上。然后，在父视图模型中，您可以使用viewModelPropertyName（或您指定的任何名称）访问属性上的方法。您可以在此处查看示例：https://gist.run/?id =9819e9bf73f6bb43b07af355c5e166ad

应用程序.html

<template>
  <require from="./has-method"></require>

  <div has-method="hello" has-method.ref="theAttribute"></div>

  <button click.trigger="callMethod()">Call method</button>
</template>

应用程序.js

export class App {
  callMethod() {
    const result = this.theAttribute.someMethod('blah');
  }
}

has-method.js

export class HasMethodCustomAttribute {
  someMethod(foo) {
    console.log('someMethod called with foo = ' + foo + ', this.value = ' + this.value);

    return `Hello ${foo}`;
  }
}