AU+

AU+ is a collection of common use case tools for use in Aurelia applications.

View on Github Buy License

Contents

Licensing

If you’re using AU+ in a successful commercial application, please purchase a license for $25.

Installation

JSPM

jspm install aurelia-plus

Webpack

npm install aurelia-plus --save

CLI

au install aurelia-plus

Usage

To begin using AU+, load the plugin in your Aurelia’s main file.

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-plus');
}

If you’d rather only include specific components, you can instead require those specific components individually.

<require from="aurelia-plus/upload-custom-element"></require>

<upload file.bind="file">Upload</upload>

You can also select specific components to globalize.

export function configure(aurelia) {
  aurelia.globalResources([
    'aurelia-plus/upload-custom-element',
    'aurelia-plus/filter-value-converter'
  ]);
}

The module name for each component is listed below.

Upload Custom Element

Module Name: aurelia-plus/upload-custom-element

The native html <input type="file" /> element looks like a button, but it has quirky behavior and doesn’t behave like a normal button. The upload custom element adds an <upload> element that looks and behaves like a button and opens file select dialog.

Bindings

file (two-way): The selected file.

Examples

<template>
 <upload class="btn btn-primary" file.bind="file">Upload<span if.bind="file"> (\${file.name} selected)</span></upload>
</template>

Number Value Converter

Module Name: aurelia-plus/number-value-converter

By default, the browser stores all input values as text, and so that’s what Aurelia passes back to your view model. The number value converter converts the value to a number for you using the browser’s parseFloat() implementation. If no number can be parsed, then the raw value is returned as a string.

Examples

<template>
  <div>
    <strong>Input:</strong>
    <input type="text" value.bind="number | number" />
  </div>
  <div>
    <strong>Output:</strong>
    <pre class="d-inline">\${number | json}</pre>
  </div>
</template>
export class NumberViewModel {
  constructor() {
    this.number = 100.5;
  }
};

Type=”number” Custom Attribute

Module Name: aurelia-plus/type-custom-attribute

Whenever you’re using <input type="number" />, you’re likely going to want to parse the value as a number, right? Aurelia+ does this for you.

Examples

<template>
  <div>
    <strong>Input:</strong>
    <input type="number" value.bind="number" />
  </div>
  <div>
    <strong>Output:</strong>
    <pre class="d-inline">\${number | json}</pre>
  </div>
</template>
export class Number2ViewModel {
  constructor() {
    this.number = 100.5;
  }
}

Date/Time Value Converters

Module Name: aurelia-plus/date-time-value-converter

The date/time value converters render JavaScript Date objects in your view using the toLocaleString() methods.

Converters

Examples

<template>
  <div>
    <strong>Original:</strong>
    <pre class="d-inline">new Date()</pre>
  </div>
  <div>
    <strong>As a date:</strong>
    <span>\${date | date}</span>
  </div>
  <div>
    <strong>As a time:</strong>
    <span>\${date | time}</span>
  </div>
  <div>
    <strong>As a date-time:</strong>
    <span>\${date | dateTime}</span>
  </div>
</template>
export class DateViewModel {
  constructor() {
    this.date = new Date();
  }
};

Filter Value Converter

Module Name: aurelia-plus/filter-value-converter

Based on the Bouncer library, the filter value converter provides a number of powerful tools for filtering arrays covering many common use cases.

Parameters

Full documentation: https://github.com/Foursails/bouncer/blob/master/README.md

Examples

        
        
<template>
  <h4>Games</h4>
  <input type="search" placeholder="Filter by Title" value.bind="title & debounce: 200" />
  <label><input type="checkbox" checked.bind="platforms" value="Super Nintendo Entertainment System" />SNES</label>
  <label><input type="checkbox" checked.bind="platforms" value="Playstation" />Playstation</label>
  <ul>
    <li repeat.for="game of games 
        | filter: { on: 'title', value: title }
        | filter: { on: 'platforms', value: platforms, mode: 'exact', update: platforms.length }
        | filter: { value: random, mode: decideOnAWhim }">
      \${game.title}
    </li>  
  </ul>

  <h4>Presidents</h4>
  <input type="search" placeholder="Filter by Name" value.bind="name | split: ' ' & debounce: 200" />
  <button click.delegate="strict = !strict">Mode: \${strict ? 'ALL' : 'ANY'}</button>
  <input type="number" placeholder="From Year" min="1788" value.bind="from | dateFromYear & debounce: 200" />
  <input type="number" placeholder="To Year" min="1788" value.bind="until | dateFromYear & debounce: 200" />
  <ul>
    <li repeat.for="pres of presidents 
        | filter: { on: 'end', value: from, mode: '>=' }
        | filter: { on: 'start', value: until, mode: '<' }
        | filter: { on: ['first','last'], value: name, strict: strict }">
      \${pres.first} \${pres.last}
    </li>
  </ul>
</template>
export class FilterViewModel {
  constructor() { 
    this.title = 'Final'
    this.platforms = []; 
    this.name = ['George', 'Bush'];
    this.from;
    this.until = new Date('2000');
    this.random = false;
    this.strict = false;
    this.games = DATA.games;
    this.presidents = DATA.presidents;
  }
}

export class DateFromYearValueConverter {
  fromView(val) {
    if (val.length === 4) {
      let date = new Date();
      date.setFullYear(val);
      return date; 
    }
  }
  toView(val) {
    let date = val instanceof Date ? val : new Date(val);
    return isNaN(date) ? val : date.getFullYear();
  }
}

const DATA = {
  presidents: [
    { presidency: 1, first: 'George', last: 'Washington', start: new Date('1789-04-30'), end: new Date('1797-03-04'), party: 'Independent' },
    { presidency: 2, first: 'John', last: 'Adams', start: new Date('1797-03-04'), end: new Date('1801-03-04'), party: 'Federalist' },
    { presidency: 3, first: 'Thomas', last: 'Jefferson', start: new Date('1801-03-04'), end: new Date('1809-03-04'), party: 'Democratic-Republican' },
    { presidency: 4, first: 'James', last: 'Madison', start: new Date('1809-03-04'), end: new Date('1817-03-04'), party: 'Democratic-Republican' },
    { presidency: 5, first: 'James', last: 'Monroe', start: new Date('1817-03-04'), end: new Date('1825-03-04'), party: 'Democratic-Republican' },
    { presidency: 6, first: 'John Quincy', last: 'Adams', start: new Date('1825-03-04'), end: new Date('1829-03-04'), party: 'Democratic-Republican/National Republican' },
    { presidency: 7, first: 'Andrew', last: 'Jackson', start: new Date('1829-03-04'), end: new Date('1837-03-04'), party: 'Democratic' },
    { presidency: 8, first: 'Martin Van', last: 'Buren', start: new Date('1837-03-04'), end: new Date('1841-03-04'), party: 'Democratic' },
    { presidency: 9, first: 'William Henry', last: 'Harrison', start: new Date('1841-03-04'), end: new Date('1841-04-04'), party: 'Whig' },
    { presidency: 10, first: 'John', last: 'Tyler', start: new Date('1841-04-04'), end: new Date('1845-03-04'), party: 'Whig' },
    { presidency: 11, first: 'James K.', last: 'Polk', start: new Date('1845-03-04'), end: new Date('1849-03-04'), party: 'Democratic' },
    { presidency: 12, first: 'Zachary', last: 'Taylor', start: new Date('1849-03-04'), end: new Date('1850-07-09'), party: 'Whig' },
    { presidency: 13, first: 'Millard', last: 'Fillmore', start: new Date('1850-07-09'), end: new Date('1853-03-04'), party: 'Whig' },
    { presidency: 14, first: 'Franklin', last: 'Pierce', start: new Date('1853-03-04'), end: new Date('1857-03-04'), party: 'Democratic' },
    { presidency: 15, first: 'James', last: 'Buchanan', start: new Date('1857-03-04'), end: new Date('1861-03-04'), party: 'Democratic' },
    { presidency: 16, first: 'Abraham', last: 'Lincoln', start: new Date('1861-03-04'), end: new Date('1865-04-15'), party: 'Republican/National Union' },
    { presidency: 17, first: 'Andrew', last: 'Johnson', start: new Date('1865-04-15'), end: new Date('1869-03-04'), party: 'Democratic/National Union' },
    { presidency: 18, first: 'Ulysses S.', last: 'Grant', start: new Date('1869-03-04'), end: new Date('1877-03-04'), party: 'Republican' },
    { presidency: 19, first: 'Rutherford B.', last: 'Hayes', start: new Date('1877-03-04'), end: new Date('1881-03-04'), party: 'Republican' },
    { presidency: 20, first: 'James A.', last: 'Garfield', start: new Date('1881-03-04'), end: new Date('1881-09-19'), party: 'Republican' },
    { presidency: 21, first: 'Chester A.', last: 'Arthur', start: new Date('1881-09-19'), end: new Date('1885-03-04'), party: 'Republican' },
    { presidency: 22, first: 'Grover', last: 'Cleveland', start: new Date('1885-03-04'), end: new Date('1889-03-04'), party: 'Democratic' },
    { presidency: 23, first: 'Benjamin', last: 'Harrison', start: new Date('1889-03-04'), end: new Date('1893-03-04'), party: 'Republican' },
    { presidency: 24, first: 'Grover Cleveland (2nd', last: 'term)', start: new Date('1893-03-04'), end: new Date('1897-03-04'), party: 'Democratic' },
    { presidency: 25, first: 'William', last: 'McKinley', start: new Date('1897-03-04'), end: new Date('1901-09-14'), party: 'Republican' },
    { presidency: 26, first: 'Theodore', last: 'Roosevelt', start: new Date('1901-09-14'), end: new Date('1909-03-04'), party: 'Republican' },
    { presidency: 27, first: 'William Howard', last: 'Taft', start: new Date('1909-03-04'), end: new Date('1913-03-04'), party: 'Republican' },
    { presidency: 28, first: 'Woodrow', last: 'Wilson', start: new Date('1913-03-04'), end: new Date('1921-03-04'), party: 'Democratic' },
    { presidency: 29, first: 'Warren G.', last: 'Harding', start: new Date('1921-03-04'), end: new Date('1923-08-02'), party: 'Republican' },
    { presidency: 30, first: 'Calvin', last: 'Coolidge', start: new Date('1923-08-02'), end: new Date('1929-03-04'), party: 'Republican' },
    { presidency: 31, first: 'Herbert', last: 'Hoover', start: new Date('1929-03-04'), end: new Date('1933-03-04'), party: 'Republican' },
    { presidency: 32, first: 'Franklin D.', last: 'Roosevelt', start: new Date('1933-03-04'), end: new Date('1945-04-12'), party: 'Democratic' },
    { presidency: 33, first: 'Harry S.', last: 'Truman', start: new Date('1945-04-12'), end: new Date('1953-01-20'), party: 'Democratic' },
    { presidency: 34, first: 'Dwight D.', last: 'Eisenhower', start: new Date('1953-01-20'), end: new Date('1961-01-20'), party: 'Republican' },
    { presidency: 35, first: 'John F.', last: 'Kennedy', start: new Date('1961-01-20'), end: new Date('1963-11-22'), party: 'Democratic' },
    { presidency: 36, first: 'Lyndon B.', last: 'Johnson', start: new Date('1963-11-22'), end: new Date('1969-01-20'), party: 'Democratic' },
    { presidency: 37, first: 'Richard', last: 'Nixon', start: new Date('1969-01-20'), end: new Date('1974-08-09'), party: 'Republican' },
    { presidency: 38, first: 'Gerald', last: 'Ford', start: new Date('1974-08-09'), end: new Date('1977-01-20'), party: 'Republican' },
    { presidency: 39, first: 'Jimmy', last: 'Carter', start: new Date('1977-01-20'), end: new Date('1981-01-20'), party: 'Democratic' },
    { presidency: 40, first: 'Ronald', last: 'Reagan', start: new Date('1981-01-20'), end: new Date('1989-01-20'), party: 'Republican' },
    { presidency: 41, first: 'George H. W.', last: 'Bush', start: new Date('1989-01-20'), end: new Date('1993-01-20'), party: 'Republican' },
    { presidency: 42, first: 'Bill', last: 'Clinton', start: new Date('1993-01-20'), end: new Date('2001-01-20'), party: 'Democratic' },
    { presidency: 43, first: 'George W.', last: 'Bush', start: new Date('2001-01-20'), end: new Date('2009-01-20'), party: 'Republican' },
    { presidency: 44, first: 'Barack', last: 'Obama', start: new Date('2009-01-20'), end: new Date('2016-01-20'), party: 'Democratic' }
  ],
  games: [
    {title: 'The Legend of Zelda: Ocarina of Time', genre: 'Action-adventure', platforms: ['Nintendo 64']},
    {title: 'Chrono Trigger', genre: 'Role-playing', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Final Fantasy VII', genre: 'Role-playing', platforms: ['PlayStation']},
    {title: 'Super Mario 64', genre: 'Platform', platforms: ['Nintendo 64']},
    {title: 'Street Fighter II', genre: 'Fighting', platforms: ['Arcade']},
    {title: 'The Legend of Zelda: A Link to the Past', genre: 'Action-adventure', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Metal Gear Solid', genre: 'Stealth', platforms: ['PlayStation']},
    {title: 'Super Mario World', genre: 'Platform', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Super Metroid', genre: 'Platform-adventure', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Resident Evil 4', genre: 'Survival horror', platforms: ['GameCube']},
    {title: 'Super Mario Kart', genre: 'Kart racing', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Castlevania: Symphony of the Night', genre: 'Platform-adventure', platforms: ['PlayStation']},
    {title: 'Super Mario Bros.', genre: 'Platform', platforms: ['Nintendo Entertainment System']},
    {title: 'Super Mario Bros. 3', genre: 'Platform', platforms: ['Nintendo Entertainment System']},
    {title: 'Tetris', genre: 'Puzzle', platforms: ['Game Boy']},
    {title: 'Half-Life 2', genre: 'First-person shooter', platforms: ['PC']},
    {title: 'Final Fantasy VI', genre: 'Role-playing', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Resident Evil', genre: 'Survival horror', platforms: ['PlayStation']},
    {title: 'GoldenEye 007', genre: 'First-person shooter', platforms: ['Nintendo 64']},
    {title: 'SoulCalibur', genre: 'Fighting', platforms: ['Dreamcast']},
    {title: 'Shadow of the Colossus', genre: 'Action-adventure', platforms: ['PlayStation 2']},
    {title: 'Pac-Man', genre: 'Maze', platforms: ['Arcade']},
    {title: 'Pokémon Red & Blue', genre: 'Role-playing', platforms: ['Game Boy']},
    {title: 'Donkey Kong', genre: 'Platform', platforms: ['Arcade']},
    {title: 'The Legend of Zelda', genre: 'Action-aventure', platforms: ['Nintendo Entertainment System']},
    {title: 'Sonic the Hedgehog', genre: 'Platform', platforms: ['Genesis/Mega Drive']},
    {title: 'Space Invaders', genre: 'Shoot \'em up', platforms: ['Arcade']},
    {title: 'Punch-Out!!', genre: 'Sports', platforms: ['Arcade']},
    {title: 'Contra', genre: 'Run and gun', platforms: ['Arcade']},
    {title: 'Doom', genre: 'First-person shooter', platforms: ['PC']},
    {title: 'Half-Life', genre: 'First-person shooter', platforms: ['PC']},
    {title: 'Halo: Combat Evolved', genre: 'First-person shooter', platforms: ['Xbox']},
    {title: 'Metal Gear Solid 2: Sons of Liberty', genre: 'Stealth', platforms: ['PlayStation 2']},
    {title: 'Super Smash Bros. Melee', genre: 'Fighting', platforms: ['GameCube']},
    {title: 'The Legend of Zelda: The Wind Waker', genre: 'Action-adventure', platforms: ['GameCube']},
    {title: 'World of Warcraft', genre: 'Massively multiplayer online RPG', platforms: ['PC']},
    {title: 'Super Mario Galaxy', genre: 'Platform', platforms: ['Wii']},
    {title: 'Secret of Mana', genre: 'Action role-playing', platforms: ['Super Nintendo Entertainment System']},
    {title: 'The Legend of Zelda: Majora\'s Mask', genre: 'Action-adventure', platforms: ['Nintendo 64']},
    {title: 'Tomb Raider', genre: 'Action-adventure', platforms: ['Saturn', 'PlayStation']},
    {title: 'Resident Evil 2', genre: 'Survival horror', platforms: ['PlayStation']},
    {title: 'StarCraft', genre: 'Real-time strategy', platforms: ['PC']},
    {title: 'Final Fantasy X', genre: 'Role-playing', platforms: ['PlayStation 2']},
    {title: 'Metroid Prime', genre: 'Action-adventure', platforms: ['GameCube']},
    {title: 'Prince of Persia: The Sands of Time', genre: 'Action-adventure', platforms: ['PlayStation 2']},
    {title: 'Call of Duty 4: Modern Warfare', genre: 'First-person shooter', platforms: ['PC','PlayStation 3','Xbox 360']},
    {title: 'Ms. Pac-Man', genre: 'Maze', platforms: ['Arcade']},
    {title: 'Double Dragon', genre: 'Beat \'em up', platforms: ['Arcade']},
    {title: 'Super Mario World 2: Yoshi\'s Island', genre: 'Platform', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Final Fantasy Tactics', genre: 'Tactical role-playing', platforms: ['PlayStation']},
    {title: 'Grand Theft Auto III', genre: 'Action-adventure', platforms: ['PlayStation 2']},
    {title: 'Ico', genre: 'Action-adventure', platforms: ['PlayStation 2']},
    {title: 'Silent Hill 2', genre: 'Survival horror', platforms: ['PlayStation 2']},
    {title: 'Star Wars: Knights of the Old Republic', genre: 'Role-playing', platforms: ['Xbox']},
    {title: 'Metal Gear Solid 3: Snake Eater', genre: 'Stealth', platforms: ['PlayStation 2']},
    {title: 'BioShock', genre: 'First-person shooter', platforms: ['PC', 'Xbox 360']},
    {title: 'Galaga', genre: 'Shoot \'em up', platforms: ['Arcade']},
    {title: 'Sonic the Hedgehog 2', genre: 'Platform', platforms: ['Genesis/Mega Drive']},
    {title: 'Shenmue', genre: 'Adventure', platforms: ['Dreamcast']},
    {title: 'The Last of Us', genre: 'Survival horror', platforms: ['PlayStation 3']},
    {title: 'Mega Man 2', genre: 'Platform', platforms: ['Nintendo Entertainment System']},
    {title: 'Final Fantasy IV', genre: 'Role-playing', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Daytona USA', genre: 'Racing', platforms: ['Arcade']},
    {title: 'Advance Wars', genre: 'Turn-based tactics', platforms: ['Game Boy Advance']},
    {title: 'Metroid', genre: 'Platform-adventure', platforms: ['Nintendo Entertainment System']},
    {title: 'Gunstar Heroes', genre: 'Run and gun', platforms: ['Genesis/Mega Drive']},
    {title: 'Xenogears', genre: 'Role-playing', platforms: ['PlayStation']},
    {title: 'Deus Ex', genre: 'Role-playing shooter', platforms: ['PC']},
    {title: 'Kingdom Hearts', genre: 'Action role-playing', platforms: ['PlayStation 2']},
    {title: 'Grand Theft Auto: San Andreas', genre: 'Action-adventure', platforms: ['PlayStation 2']},
    {title: 'Grand Theft Auto IV', genre: 'Action-adventure', platforms: ['PlayStation 3', 'Xbox 360']},
    {title: 'Uncharted 2: Among Thieves', genre: 'Action-adventure', platforms: ['PlayStation 3']},
    {title: 'Mass Effect 2', genre: 'Role-playing shooter', platforms: ['PC', 'Xbox 360']},
    {title: 'OutRun', genre: 'Racing', platforms: ['Arcade']},
    {title: 'Grim Fandango', genre: 'Adventure', platforms: ['PC']},
    {title: 'Portal', genre: 'Puzzle platformer', platforms: ['PC', 'Xbox 360']},
    {title: 'Red Dead Redemption', genre: 'Action-adventure', platforms: ['PlayStation 3', 'Xbox 360']},
    {title: 'Super Mario Galaxy 2', genre: 'Platform', platforms: ['Wii']},
    {title: 'Dark Souls', genre: 'Action role-playing', platforms: ['PlayStation 3', 'Xbox 360']},
    {title: 'Grand Theft Auto V', genre: 'Action-adventure', platforms: ['PlayStation 3', 'Xbox 360']},
    {title: 'Portal 2', genre: 'Puzzle platformer', platforms: ['PC', 'PlayStation 3', 'Xbox 360']},
    {title: 'Virtua Fighter 2', genre: 'Fighting', platforms: ['Arcade']},
    {title: 'Nights into Dreams...', genre: 'Action', platforms: ['Saturn']},
    {title: 'Gran Turismo', genre: 'Racing simulation', platforms: ['PlayStation']},
    {title: 'Panzer Dragoon Saga', genre: 'Role-playing', platforms: ['Saturn']},
    {title: 'Counter-Strike', genre: 'First-person shooter', platforms: ['PC']},
    {title: 'Ōkami', genre: 'Action-adventure', platforms: ['PlayStation 2']},
    {title: 'Fallout 3', genre: 'Role-playing shooter', platforms: ['PC', 'PlayStation 3', 'Xbox 360']},
    {title: 'Metal Gear Solid 4: Guns of the Patriots', genre: 'Stealth', platforms: ['PlayStation 3']},
    {title: 'Street Fighter IV', genre: 'Fighting', platforms: ['PC', 'PlayStation 3', 'Xbox 360']},
    {title: 'Batman: Arkham City', genre: 'Action-adventure', platforms: ['PlayStation 3', 'Xbox 360']},
    {title: 'The Elder Scrolls V: Skyrim', genre: 'Action role-playing', platforms: ['PC', 'PlayStation 3', 'Xbox 360']},
    {title: 'Journey', genre: 'Adventure', platforms: ['PlayStation 3']},
    {title: 'Tecmo Bowl', genre: 'Sports', platforms: ['Arcade']},
    {title: 'Sega Rally', genre: 'Racing', platforms: ['Arcade']},
    {title: 'Tekken 2', genre: 'Fighting', platforms: ['Arcade']},
    {title: 'Tekken 3', genre: 'Fighting', platforms: ['Arcade']},
    {title: 'Chrono Cross', genre: 'Role-playing', platforms: ['PlayStation']},
    {title: 'The Legend of Zelda: Twilight Princess', genre: 'Action-adventure', platforms: ['Wii']},
    {title: 'Super Smash Bros. Brawl', genre: 'Fighting', platforms: ['Wii']},
    {title: 'Dragon Quest', genre: 'Role-playing', platforms: ['Nintendo Entertainment System']},
    {title: 'Ninja Gaiden', genre: 'Platform', platforms: ['Nintendo Entertainment System']},
    {title: 'Herzog Zwei', genre: 'Real-time strategy', platforms: ['Genesis/Mega Drive']},
    {title: 'Ridge Racer', genre: 'Racing', platforms: ['Arcade']},
    {title: 'EarthBound', genre: 'Role-playing', platforms: ['Super Nintendo Entertainment System']},
    {title: 'Phantasy Star II', genre: 'Role-playing', platforms: ['Genesis/Mega Drive']},
    {title: 'Streets of Rage 2', genre: 'Beat \'em up', platforms: ['Genesis/Mega Drive']}
  ]
};

JSON Value Converter

Module Name: aurelia-plus/json-value-converter

The JSON value converter wraps the JSON.stringify function to render an object as JSON in the view.

Parameters

Examples

<template>
  <div repeat.for="state of states">
    <strong>\${state.name}</strong>
    <pre>\${state | json}</pre>
  </div>
  
  <div>
    <strong>States</strong>
    <pre>\${states | json:true}</pre>
  </div>
</template>
export class JsonViewModel {
  constructor() {
    this.states = [
      { name: 'Florida', population: 20610000 }
    ];
  }
};

Split Value Converter

Module Name: aurelia-plus/split-value-converter

The split value converter is a two way value converter that splits text from the view into an array in the view-model and joins an array from the view-model back into a string in the view. This is particularly useful for a search input where you may want tokenize the input.

Parameters

Examples

<template>
  <div>
    <strong>Input:</strong>
  <input type="search" value.bind="search | split" /> 
  </div>
  <div>
    <strong>Output:</strong>
    <pre class="d-inline">\${search | json}</pre>
  </div>
</template>
export class SplitViewModel {
  constructor() {
    this.search = ["final","fantasy"];
  }
};

JavaScript Globals

Module Name: aurelia-plus/globals-view-engine-hooks

Have you ever found yourself trying to JSON.stringify in your view? AU+ adds the JavaScript globals Array, Object, JSON, Date, Math, Number, RegExp, and Reflect to the view, providing you with more of the tools you’d expect from JavaScript directly in the view.

Examples

<template>
  <div>
    <strong>Object / Reflect</strong>
    
  </div>

  <div>
    <strong>Array</strong>
    <ul if.bind="Array.isArray(arr)">
      <li repeat.for="item of arr">\${item}</li>
    </ul>
  </div>
  
  <div>
    <strong>Math / Number</strong>
    <p>cos(π/2) = \${Math.cos(Math.PI / 2)} <span if.bind="Math.cos(Math.PI / 2) < Number.EPSILON">≅ 0</span></p>
  </div>
  
  <div>
    <strong>RegExp</strong>
    <p if.bind="RegExp('good').test(str)">This is good.</p>
  </div>
</template>
export class GlobalsViewModel {
  constructor() {
    this.obj = { one: 1, two: 2 };
    this.arr = [1,2,3];
    this.str = 'good';
  }
}

Refresh Binding Behavior

Module Name: aurelia-plus/refresh-binding-behavior

The refresh binding behavior adds the ability to declaratively specify “dirty-checking” style observation. This is useful when you want to display data that Aurelia doesn’t know how to observe, such as functions of arbitrary objects or non-configurable properties.

Parameters

Examples

<template>
  <div class="mb-3">
    <div class="mb-1" repeat.for="point of points">
      <strong>x\${$index+1}</strong>
      <input type="number" value.bind="point.x" />
      <strong>y\${$index+1}</strong>
      <input type="number" value.bind="point.y" />
    </div>
  </div>
  <div>
    <strong>60 fps</strong>
    <pre>${points | json & refresh: 16}</pre>
  </div>
  <div>
    <strong>10 fps (default):</strong>
    <pre>${points | json & refresh}</pre>
  </div>
  <div>
    <strong>5 fps:</strong>
    <pre>${points | json & refresh:200}</pre>
  </div>
</template>
export class RefreshViewModel {
  constructor() {
    this.points = [{x:1,y:1},{x:2,y:2}];
  }
}