CODEWITHSUNDEEP
javascriptaurelia
Bimalmithran P.B
Bimalmithran P.B

Reputation: 101

Aurelia call function from custom element

I am trying to make my first aurelia Application and I think I have hit a wall here I have some code here 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>

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>

top-search.ts

import {bindable} from 'aurelia-framework';

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

in this code, when I call the function ActivateTyping() from the custom element, it is getting called and it is changing the typing value to true but it is not changing in the view. Any idea why this is happening?

Upvotes: 0

Views: 1496

Answers (1)

Jeff G
Jeff G

Reputation: 2175

The problem is that this is not set to the instance of the view-model when you use bind. Use action.call instead of action.bind.

lists.html

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

Upvotes: 1

Related Questions