Question

我正在努力制作我的第一个aurelia应用程序，我想我已经在这里碰壁了我这里有一些代码的 lists.ts

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);
  }
}

lists.html

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

热门-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>

热门-search.ts

import {bindable} from 'aurelia-framework';

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

在此代码中，当我从自定义元素调用函数ActivateTyping()时，它会被调用，并且它会将typing值更改为true，但它不会更改视图。知道为什么会这样吗？

Answer 1

问题是当您使用this时，bind未设置为视图模型的实例。使用action.call代替action.bind。

<强> lists.html

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

Aurelia从自定义元素调用函数

1 个答案: