https://github.com/zewa666/aurelia-async-binding

Aurelia async bindingbehavior to consume Observables and Promises
https://github.com/zewa666/aurelia-async-binding

aurelia aurelia-binding aurelia-store rxjs

Last synced: about 13 hours ago
JSON representation

Aurelia async bindingbehavior to consume Observables and Promises

• Host: GitHub
• URL: https://github.com/zewa666/aurelia-async-binding
• Owner: zewa666
• License: mit
• Created: 2017-11-08T19:38:59.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T06:23:23.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T19:12:13.535Z (8 days ago)
• Topics: aurelia, aurelia-binding, aurelia-store, rxjs
• Language: TypeScript
• Size: 443 KB
• Stars: 18
• Watchers: 4
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# aurelia-async-binding

[![npm Version](https://img.shields.io/npm/v/aurelia-async-binding.svg)](https://www.npmjs.com/package/aurelia-async-binding)

[![Join the chat at https://gitter.im/aurelia/discuss](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/aurelia/discuss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![CircleCI](https://circleci.com/gh/zewa666/aurelia-async-binding.svg?style=shield)](https://circleci.com/gh/zewa666/aurelia-async-binding)

[![Coverage Status](https://coveralls.io/repos/github/zewa666/aurelia-async-binding/badge.svg?branch=master)](https://coveralls.io/github/zewa666/aurelia-async-binding?branch=master)

An Aurelia binding behavior to consume async streams and promises directly from within your templates.

## Install

Install the npm dependency via

```bash

npm install aurelia-async-binding

```

## Configuration

In your `main.ts` you'll have to register the plugin which makes it globally available:

```typescript

import {Aurelia} from 'aurelia-framework'

import environment from './environment';

export function configure(aurelia: Aurelia) {

  aurelia.use

    .standardConfiguration()

    .feature('resources');

  ...

  aurelia.use.plugin("aurelia-async-binding");  // <----- REGISTER THE PLUGIN

  aurelia.start().then(() => aurelia.setRoot());

}

```

## Features

* Easily access streamed values

* Pluck complex object properties

* Deep-plucking to access nested complex object properties using the dot-notation

* Register `completedHandler` for once the stream completes

* Register `error` handlers to react on streamed errors

## Usage

Once the plugin is installed and configured you can use the `async` binding behavior.

An example VM and View can be seen below:

```typescript

import { Observable } from 'rxjs/Observable';

import "rxjs/add/operator/map";

import "rxjs/add/operator/take";

import "rxjs/add/observable/interval";

import "rxjs/add/observable/of";

import "rxjs/add/observable/from";

interface SPAFramework {

  label: string;

  url: string;

}

export class App {

  public frameworks: Observable;

  public frameworkOverTime: Observable;

  public isSequenceDone: boolean = false;

  constructor() {

    const data: SPAFramework[] = [

      { label: "Aurelia", url: "http://aurelia.io" },

      { label: "Angular v4", url: "http://angular.io" },

      { label: "React", url: "https://facebook.github.io/react/" },

    ];

    this.frameworks = Observable.of(data);

    this.frameworkOverTime = Observable.interval(2000)

      .map((idx) => data[idx])

      .take(data.length);

  }

  public completedHandler = () => {

    setTimeout(() => this.isSequenceDone = true, 2000);

  }

}

```

```html

  
SPA Frameworks

  


    


      ${framework.label}

    

  


  
Frameworks streamed (plucked property)

  


      ${frameworkOverTime & async: { property: 'label' }}

  


  
Frameworks streamed (with binding, completed handler)

  


    ${label}

    Sequence is done!

  


```

## Acknowledgement

Thanks goes to Dwayne Charrington for his Aurelia-TypeScript starter package https://github.com/Vheissu/aurelia-typescript-plugin