CODEWITHSUNDEEP
javascriptaurelia
Zubzob
Zubzob

Reputation: 2743

Aurelia component binding

I'm new to this framework and I was wondering whether or not there's a component binding that allows you to specify the component to be used on a regular HTML element and not a custom one.

Let's say we have a Message component. Would it be possible to use it as:

<div component="message"></div>

instead of 

<message></message>

Knockout.js supports this for their components: The "component" binding.

Upvotes: 3

Views: 809

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

Yep! You can use the as-element custom attribute to do this.

Here's an example: https://gist.run?id=5fc98df81dff7eec2868ea918f6342fb

app.html

<template>
   <require from="./message"></require>

   <message say="Say"></message>

   <div as-element="message" say.bind="what"></div>
</template>

app.js

export class App {
  what = 'What!'
}

message.html

<template>
  <h1>${say}</h1>
</template>

message.js

import {bindable} from 'aurelia-framework';

export class MessageCustomElement {
  @bindable say = '';
}

rendered

enter image description here

Upvotes: 6

Related Questions