來自自定義元素的Aurelia調用函數

Question

我正在嘗試制作我的第一個aurelia應用程序，我想我在這里碰壁了。

export class Lists {
  protected module: string = 'lists';
  private typing : boolean = false;

  ActivateTyping() {
    console.log('inside ActivateTyping');
    this.typing = true;
    console.log(this.typing);
  }

  DeactivateTyping() {
    console.log('inside DeactivateTyping');
    this.typing = false;
    console.log(this.typing);
  }
}

listing.html

<template>
  <top-search action.bind="ActivateTyping"></top-search>
  ${typing}
<template>

top-search.html

<template>
  <nav class="navbar navbar-default navbar-fixed-top hio-top-search-nav-bar" role="navigation">
    <div class="container">
      <div class="input-group">
        <input type="search" class="form-control" click.delegate="action()" blur.trigger="action()" placeholder="Search your boards">
        <div class="input-group-addon"><i class="icon ion-ios-search"></i></div>
      </div>
    </div>
  </nav>
</template>

頂級搜索

import {bindable} from 'aurelia-framework';

@bindable('action')
export class TopSearch { }

在此代碼中，當我從自定義元素調用函數ActivateTyping() ，該函數被調用，並且將typing值更改為true但在視圖中未更改。 知道為什么會這樣嗎？

Answer 1

問題是， this當您使用未設置為視圖模型的實例bind 。 使用action.call而不是action.bind 。

listing.html

<template>
  <top-search action.call="ActivateTyping()"></top-search>
  ${typing}
<template>