Question

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

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

Answer 1

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

<强> app.html

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

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

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

<强> app.js

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

<强>具有-method.js

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

    return `Hello ${foo}`;
  }
}

Answer 2

有一些方法可以做到，但我相信理想的做法是将属性从自定义属性绑定到视图模型。例如：

MyCustomAttribute {

  @bindable showOrHide; //use this to show or hide your element
}

MyViewModel {

   visible = false;
}

用法：

<div my-custom-attribute="showOrHide.bind: visible"></div>

因此，每当您更改visible时，您也会更改showOrHide。

尽管如此，记住Aurelia已经拥有show和if个自定义属性是很好的：

<div show.bind="visible" my-custom-attribute></div>
<div if.bind="visible" my-custom-attribute></div>

确保您确实需要在自定义属性中创建此行为。

Answer 3

这可以在不需要ref的情况下完成。这是一个显示如何的例子。

它使用自定义属性从自定义元素调用自定义属性上的showNotification方法。

在自定义属性中：

@bindable({ defaultBindingMode: bindingMode.twoWay }) showNotificationCallback: ()=> void;

bind() {
    this.showNotificationCallback = this.showNotification.bind(this);
}

 showNotification() {
    // Your code here
}

在自定义元素视图中（注意此绑定的值中没有parens）：

 <div notification="show-notification-callback.bind: showSaveSuccessNotification;></div>

在自定义元素视图模型中：

// Show the save success view to the user.
if (typeof this.showSaveSuccessNotification=== 'function') {
    this.showSaveSuccessNotification();
}

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

3 个答案: