Google News
logo
Aurelia Interview Questions
Use the ref binding command to create a reference to a DOM element. The ref command's most basic syntax is ref="expression". When the view is data-bound the specified expression will be assigned the DOM element.
  <template>
    <input type="text" ref="nameInput"> ${nameInput.value}
  </template>
The ref command has several qualifiers you can use in conjunction with custom elements and attributes :
 
* element.ref="expression" : create a reference to the DOM element (same as ref="expression").

* attribute-name.ref="expression" : create a reference to a custom attribute's view-model.

* view-model.ref="expression" : create a reference to a custom element's view-model.

* view.ref="expression" : create a reference to a custom element's view instance (not an HTML Element).

* controller.ref="expression" : create a reference to a custom element's controller instance.
String interpolation expressions enable interpolating (surprise!) the result of an expression with text. The best way to demonstrate this capability is with an example. Below are two span elements with data-bound textcontent :
<span textcontent.bind="'Hello' + firstName"></span>
  
<span>Hello ${firstName}</span>
The first span uses the bind command. The second uses string interpolation. The interpolated version is much easier to read and easy to remember because the syntax matches the template literal syntax standardized in ES2015.
 
String interpolation can be used within HTML attributes as an alternative to to-view binding. By default, the mode of an interpolation binding is to-view and the result of the expression is always coerced to a string. Results that are null or undefined will result in an empty string.
The binding system makes several properties available for binding in your templates, depending on the context.
 
* $this : The binding context (the view-model).

* $parent : Explicitly accesses the outer scope from within a compose or repeat template. You may need this when a property on the current scope masks a property on the outer scope. Chainable- eg $parent.$parent.foo is supported.

* $event : The DOM Event in delegate or trigger bindings.

* $index : In a repeat template, the index of the item in the collection.

* $first : In a repeat template, is true if the item is the first item in the array.

* $last : In a repeat template, is true if the item is the last item in the array.

* $even : In a repeat template, is true if the item has an even numbered index.

* $odd : In a repeat template, is true if the item has an odd numbered index.
Class : You can bind an element's class attribute using string interpolation or with .bind/.to-view.
<template>
    <div class="foo ${isActive ? 'active' : ''} bar"></div>
    <div class.bind="isActive ? 'active' : ''"></div>
    <div class.one-time="isActive ? 'active' : ''"></div>
</template>

 

To ensure maximum interoperability with other JavaScript libraries, the binding system will only add or remove classes specified in the binding expression. This ensures classes added by other code (eg via classList.add(...)) are preserved. This "safe by default" behavior comes at a small cost but can be noticeable in benchmarks or other performance critical situations like repeats with lots of elements. You can opt out of the default behavior by binding directly to the element's className property using class-name.bind="...." or class-name.one-time="...". This will be marginally faster but can add up over a lot of bindings.
 
Style : You can bind a css string or object to an element's style attribute. Use css custom attribute when doing string interpolation in your view to ensure your application is compatible with Internet Explorer and Edge. If you don't use interpolation in css - it won't get processed, so if you are just using inline style - use the proper style attribute of HTMLElement.
 
Style Binding Data : TypeScript
  export class StyleData {
    styleString: string;
    styleObject: any;
  
    constructor() {
      this.styleString = 'color: red; background-color: blue';
  
      this.styleObject = {
        color: 'red',
        'background-color': 'blue'
      };
    }
  }
Style Binding Example :
  <template>
    <div style.bind="styleString"></div>
    <div style.bind="styleObject"></div>
  </template>
Sometimes it is desirable to return a dynamically computed value when accessing a property, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls. In JavaScript, this can be accomplished with the use of a getter.
 
Here's an example Person class that exposes a fullName property that computes it's value using the firstName and lastName properties.
 
Computed Properties : TypeScript
  export class Person {
    firstName: string = 'John';
    lastName: string = 'Doe';
  
    get fullName(): string {
      return `${this.firstName} ${this.lastName}`;
    }
  }
  
There isn't anything special you need to do to bind to a computed property like fullName. The binding system will examine the property's descriptor , determine that the value of the property is computed by a function and choose the dirty checking observation strategy. Dirty checking means the binding system will periodically check the property's value for changes and update the view as-needed. This means your property's getter function will be executed many times, approximately once every 120 milliseconds. Most of the time this isn't an issue, however, if you're using a lot of computed properties or if your getter functions are sufficiently complex you may want to consider giving the binding system hints on what to observe so that it doesn't need to use dirty checking. This is where the @computedFrom decorator comes in:
 
Computed Properties : TypeScript
  import {computedFrom} from 'aurelia-framework';
  
  export class Person {
    firstName: string = 'John';
    lastName: string = 'Doe';
  
    @computedFrom('firstName', 'lastName')
    get fullName(): string {
      return `${this.firstName} ${this.lastName}`;
    }
  }
@computedFrom tells the binding system which expressions to observe. When those expressions change, the binding system will re-evaluate the property (execute the getter). This eliminates the need for dirty checking and can improve performance. The @computedFrom parameters can be simple property names as shown above or more complex expressions like @computedFrom('event.startDate', 'event.endDate').
The debounce binding behavior is another rate-limiting binding behavior that prevents the binding from being updated until a specified interval has passed without any changes. Debounce binding's one of the use can be determined in a common use case is a search input that triggers searching automatically.
animator-velocity() in Aurelia is used to make things further lively and interesting. This is when the element you will be using will be more exciting performing certain animations as you like to. Here in the Aurelia animation solutions, we can use simply the same library. Here it actually uses a very simple interface and has great flexibility in performing or creating animations.
Throttle in Aurelia is used for rate limiting. Binding behavior is basically a process where the binding process continues throughout the whole cycle. The Aurelia ships consist of multiple behaviors which are basically used to enable similar scenarios. In this case, the first binding that happens is the throttle binding process. Here it just limits the continuous two way binding of the view model and on the other hand the one-way binding of the view when it is updated.
By default, the DefaultLinkHandler skips click hijacking in following situations.
 
1. if it's not clicking primary button (left button for right-handed).
2. if any of Alt/Ctrl/Meta/Shift keys is pressed.
3. if the href on <a> element starts with # (link to local hash), or it's a full url like https://... or ftp://....
4. if the <a> has a target attribute and it is not targeting the current window.
  <a href="/some/link" target="_blank">Skip Hijacking</a>
  
  <a href="/some/link">Does Not Skip</a>
  <a href="/some/link" target="_self">Does Not Skip</a>
  <a href="/some/link" target="name-of-current-window">Does Not Skip</a>​
  
5. if the <a> has special attribute download, or router-ignore, or data-router-ignore.
  <a href="/some/link" download>Skip Hijacking</a>
  <a href="/some/link" download="">Skip Hijacking</a>
  <a href="/some/link" router-ignore>Skip Hijacking</a>
  <a href="/some/link" router-ignore="">Skip Hijacking</a>
  <a href="/some/link" data-router-ignore>Skip Hijacking</a>
  <a href="/some/link" data-router-ignore="">Skip Hijacking</a>​
The data-router-ignore is introduced to play nice with another Aurelia feature: automatic data attribute creation.
<a href="/some/link" data-router-ignore.bind="condition || null">Conditional Skip Hijacking</a>
Here Aurelia will dynamically add/remove attribute data-router-ignore when condition changes. Note || null is necessary because Aurelia only removes the data attribute when the bound value becomes null or undefined, it doesn't remove the data attribute when bound value is 0 or "" or even false.
 
In comparison, <a href="/some/link" router-ignore.bind="condition || null">Does not work</a> does NOT add/remove attribute router-ignore. Aurelia only does that for data- or aria- attributes.