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

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

---

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

有一些方法可以做到这一点，但我认为理想的方法是将自定义属性中的属性绑定到视图模型。例如：

MyCustomAttribute {

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

MyViewModel {

   visible = false;
}

用法：

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

---

如果确实需要在自定义属性中创建此行为，请确保。

有一些方法可以做到这一点，但我认为理想的方法是将自定义属性中的属性绑定到视图模型。例如：

MyCustomAttribute {

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

MyViewModel {

   visible = false;
}

用法：

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

---

如果确实需要在自定义属性中创建此行为，请确保。

要访问自定义属性的视图模型，只需再次将自定义属性放在元素上，但这次将

.ref=“viewModelPropertyName”

放在属性上。然后，在父视图模型中，您可以使用

viewModelPropertyName

（或您指定的任何名称）访问属性上的方法。您可以在此处看到这样一个示例：

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>

有方法.js

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

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

    return `Hello ${foo}`;
  }
}

---

要访问自定义属性的视图模型，只需再次将自定义属性放在元素上，但这次将

.ref=“viewModelPropertyName”

放在属性上。然后，在父视图模型中，您可以使用

viewModelPropertyName

（或您指定的任何名称）访问属性上的方法。您可以在此处看到这样一个示例：

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>

有方法.js

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

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

    return `Hello ${foo}`;
  }
}

---

无需

ref

即可完成此操作。下面是一个例子，说明了如何

它使用自定义属性从自定义元素调用自定义属性上的

showNotification

方法

在自定义属性中：

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

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

 showNotification() {
    // Your code here
}

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

---

无需

ref

即可完成此操作。下面是一个例子，说明了如何

它使用自定义属性从自定义元素调用自定义属性上的

showNotification

方法

在自定义属性中：

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

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

 showNotification() {
    // Your code here
}

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

---

这个答案不正确。我已经发布了正确的答案。@AshleyGrant我知道答案没有显示如何调用自定义属性方法，但是你不认为从自定义属性调用方法只是为了隐藏/显示元素是完全过火了吗？我完全同意你的看法。但与此同时，我在这里啜饮着我的“公认答案”啤酒，它尝起来相当不错。：-）但是说真的，你是对的，OP想要使用的策略是实现他们想要实现的目标的错误策略，但同时，按原样回答这个问题是有帮助的。。除非我选择用你在这里回答的方式来回答。您知道它是怎样的。另外，在您的回答中显示

showOrHideChanged

回调也会很有帮助。我们的两个答案都对OP有用。这个答案不正确。我已经发布了正确的答案。@AshleyGrant我知道答案没有显示如何调用自定义属性方法，但是你不认为从自定义属性调用方法只是为了隐藏/显示元素是完全过火了吗？我完全同意你的看法。但与此同时，我在这里啜饮着我的“公认答案”啤酒，它尝起来相当不错。：-）但是说真的，你是对的，OP想要使用的策略是实现他们想要实现的目标的错误策略，但同时，按原样回答这个问题是有帮助的。。除非我选择用你在这里回答的方式来回答。您知道它是怎样的。另外，在您的回答中显示

showOrHideChanged

回调也会很有帮助。我们的两个答案对OP都很有用。