Aurelia 1 Docs
Website
  • Introduction
  • Introduction
    • Quick Start
    • Aurelia for new developers
    • Contact manager tutorial
  • Components
    • Component basics
    • Component lifecycles
    • Styling components
    • Component options
    • Bindable properties
    • Slotted content
    • Template compilation using processContent
  • Templates
    • Template syntax
      • Attribute binding
      • Event binding
      • Text interpolation
      • Element content
      • Function references
      • Element references
      • Contextual properties
      • Expression syntax
      • Binding
    • Custom attributes
    • Value converters (pipes)
    • Binding behaviors
    • Form inputs
    • CSS classes and styling
    • List rendering (repeaters)
    • Conditional rendering
    • HTML & SVG attributes
    • The as-element (element aliasing)
    • View Resource pipeline
    • View and Compilation Spies
  • Getting to know Aurelia
    • App configuration and startup
    • Routing
      • Getting started
      • Router configuration
      • Configuring routes
      • Viewports
      • Layouts
      • Redirecting routes
      • View Swapping and Animation
      • Internationalizing Titles
      • Fallback Routes
      • Navigating
      • Lifecycle hooks
      • Router pipelines (hooks)
      • Reusing an Existing View Model
      • Router events
    • Enhance
    • Dynamic composition
    • Observation
    • Dependency injection (DI)
      • Overview
      • Injection
      • Resolvers
    • Task queue
    • Event aggregator
    • Server side rendering
      • Caveats
      • How it works
      • Isomorphic code
      • Memory management
      • Different entry points
      • 404 pages
    • CLI
      • Machine setup
      • Creating a new project
      • Running your app
      • Environments
      • Building your app
      • Generators
      • Configuration with aurelia.json
      • Webpack vs built-in bundler
      • Gulp tasks
      • Webpack
      • Built-in bundler
      • Updating & migrating
      • Recipes & known issues
      • Getting help
  • Developer guides
    • Animation
    • Testing
      • Unit Testing
        • Testing Custom Elements
        • Testing Custom Attributes
        • Testing Routing and Navigation
        • Advanced Testing
        • Helpful Properties, Functions, and Advanced Querying
        • Dependency Injection Testing
        • Testing Custom Value Converters and Binding Behaviors
        • Internationalization (i18n) Testing
      • End-to-end testing
        • Getting started with Playwright
        • Writing E2E tests
        • Advanced Techniques
    • Logging
    • Building plugins
      • Plugin Development
      • Building and Publishing
      • Advanced Plugin Techniques
    • UI Virtualization
    • Integrations
    • Cheat sheet
  • Aurelia packages
    • Validation
    • i18n Internationalization
    • Dialogs
    • Fetch client
    • HTTP client
    • Store
      • Configuring your app
      • What is the State?
      • Reasons for state management
      • Subscribing to the stream of states
      • Subscribing with the connectTo decorator
      • What are actions?
      • Async actions
      • Dispatching actions
      • Resetting the store to a specific state
      • Two-way binding and state management
      • Recording a navigable history of the stream of states
      • Making our app history-aware
      • Navigating through history
      • Handling side-effects with middleware
      • Accessing the original (unmodified) state in a middleware
      • Defining settings for middlewares
      • Error Propagation with Middlewares
      • Default middlewares
      • Tracking overall performance
      • Defining custom devToolsOptions
      • Defining custom loglevels
      • Debugging with the Redux devtools extension
      • Comparison to other state management libraries
Powered by GitBook
On this page
  • How It Works
  • Examples
  • Basic usage
  • Passing Event Object
  • Tips

Was this helpful?

Export as PDF
  1. Templates
  2. Template syntax

Function references

In Aurelia, you can use the .call binding command to invoke functions directly from your view. This is particularly useful when you need to pass specific arguments or control the context in which the function is called.

<element click.call="myFunction(arg1, arg2)"></element>

How It Works

When you use .call, Aurelia will:

  1. Evaluate the expression in the context of your view-model

  2. Invoke the resulting function with the provided arguments

  3. Set the function's this context to the view-model

Examples

Basic usage

<button click.call="greet('World')">Say Hello</button>
export class MyViewModel {
  greet(name) {
    alert(`Hello, ${name}!`);
  }
}

Passing Event Object

You can pass the event object using $event:

<input keyup.call="handleKeyUp($event)">
export class MyViewModel {
  handleKeyUp(event) {
    console.log('Key pressed:', event.key);
  }
}

Tips

  • Use .call when you need to pass specific arguments to your function.

  • It's great for one-time function calls that don't need to update bindings.

  • Remember, .call doesn't create a persistent binding like .bind does.

PreviousElement contentNextElement references

Last updated 8 months ago

Was this helpful?