Aurelia 上的自定义属性不起作用答案

【问题标题】：Custom Attribute on Aurelia not workingAurelia 上的自定义属性不起作用
【发布时间】：2017-05-18 10:52:09
【问题描述】：

我是 Aurelia 的初学者。我想编写一个自定义属性，如下所示：

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;
  }
}

你可以在下面看到html：

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

我得到一个错误：

ERROR [app-router] 错误：(SystemJS) 无法动态转译 ES 模块，因为 SystemJS.transpiler 设置为 false。

你能帮帮我吗？

【问题讨论】：

这与您的 SquareCustomAttribute 类和您的 SystemJS 转译器有冲突。这门课的写法和你其他的一样吗？
我尝试了不同的课程。我总是收到这个错误
您是否更改了构建或任务文件夹中的某些内容？
我找到了。问题好复杂……我把js改成ts了。
@user2505235 - 当我询问这是否与您的其他课程以相同的方式编写时，这就是我的意思。很高兴你把它整理好了。

标签： aurelia custom-attributes

【解决方案1】：

一个简单的方法来做你想做的事情（不仅仅是一个属性）是这样的：

试试这个：

square.html

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

现在你只需像这样使用它：

[任何].html

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

在文档中的数据绑定下几乎有一个确切的例子： Aurelia Docs: Cheat Sheet - Databinding

【讨论】：

自定义元素（如您所述）！=自定义属性（OP已询问）
意识到在我回答之后..我修改了我的答案以反映这是实现他正在尝试的选项，但它不是属性路由。

【解决方案2】：

创建一个答案，以便可以关闭它。

用户的脚本文件出错，导致转译器失败。将文件扩展名从 .js 更改为 .ts 解决了这个问题，因为 TypeScript 文件可以由 SystemJS 处理。

【讨论】：