Custom Attribute on Aurelia not working

Question

I am a beginner by Aurelia. I want to program a Custom Attribute as you see here:

square.js:

/*jshint esversion: 6 */
import {bindable, inject} from 'aurelia-framework';

@inject(Element)
export class SquareCustomAttribute {
  @bindable sideLength;
  @bindable color;

  constructor(element){
    this.element = element;
  }

  sideLengthChanged(newValue, oldValue){
    this.element.style.width = this.element.style.height = `${newValue}px`;
  }

  colorChanged(newValue, oldValue){
    this.element.style.backgroundColor = newValue;
  }
}

and you can see html in the following:

<template>
  <require from="./square"></require>
  <div square="color.bind: squareColor; side-length.bind: squareSize"></div>
</template>

I get an error:

ERROR [app-router] Error: (SystemJS) Unable to dynamically transpile ES module as SystemJS.transpiler set to false.

Could you please help me?

This is a conflict with your SquareCustomAttribute class and your SystemJS transpiler. Is this class written the same way as your others? — Tom
I found it. The problem was so complicated...I changed the js to ts. — Sohrab
@user2505235 - This is what I was getting at when asking if this was written in the same way as your other classes. Glad you got it sorted. — Tom

weagle08 weagle08 · Accepted Answer · 2017-05-18T15:10:00

An easy way to do what you are trying to do (not purely an attribute) is this:

try this:

square.html

<template bindable="sideLength, color">
    <div css.bind="height: ${sideLength}; width: ${sideLength}; background-color: ${color}"/>
</template>

now you just use it like this:

[any].html

<require from="[path]/[to]/square.html"></require>
.
.
.
<square side-length="50" color="red"></square>
.
.
.

There is almost an exact example of this under data binding in the docs: Aurelia Docs: Cheat Sheet - Databinding

Custom Attribute on Aurelia not working

2 Answers