在 Aurelia 的子类上使用 @bindable 属性答案

【问题标题】：Using the @bindable attribute on child class in Aurelia在 Aurelia 的子类上使用 @bindable 属性
【发布时间】：2016-04-17 20:21:51
【问题描述】：

对于当前工作中的项目，我们正在创建相当多的自定义控件，它们都共享相同的属性并且是可绑定的。

@bindable required: boolean = false;
@bindable minLength: number = 0;
@bindable maxLength: number = 0;

由于我们希望避免代码重复，因此我们的想法是将这些可绑定属性保存在一个单独的类中，在本例中称为“验证”。

import {Validation} from "./validation";

export class MyClass {
  private validation: Validation = new Validation();

  // also tried:
  // @bindable validation: Validation = new Validation();
}

问题是如何让 HTML 绑定到 Validation 类中的属性。这样做validation.required.bind="someProperty.required" 不会更新验证实例上的required 属性。我们尝试使用 DI，但这似乎也没有减少它。

import {inject} from "aurelia-framework";
import {Validation} from "./validation";

@inject(Validation)
export class MyClass {
  constructor(private validation: Validation) {
    this.validation = validation;
  }
}

任何提示将不胜感激。

编辑：

似乎 Aurelia 将 'validation.required' 解释为命令而不是表达式。

WARN [templating-binding] Unknown binding command. Object {defaultBindingMode: null, attrName: "validation", attrValue: "true", command: "required", expression: null}

【问题讨论】：

虽然 Aurelia 即将发布的版本之一将支持绑定到基类的元素，但还有另一种方法可以节省双倍逻辑：通过装饰器添加可绑定属性。我已经在这里解释过：stackoverflow.com/a/45361429/1521227 –
虽然这不能直接回答这个问题，但还有另一种方法可以帮助你——那就是使用组合而不是继承。我已经在这里解释了它是如何工作的：stackoverflow.com/a/45361429/1521227

标签： html dependency-injection typescript aurelia

【解决方案1】：

作为一种解决方法，直到 Aurelia 支持具有可绑定属性的继承，我将绑定到具有一些共享属性的类。可绑定的现在将在控件中复制。

import {bindable, bindingMode} from "aurelia-framework";
import {IControlBase, ControlBase} from "./controlbase";

export class MyClass {
  @bindable controlbase: IControlBase = new ControlBase();
  @bindable label: string = "";
  @bindable editing: boolean = false;
  @bindable({ defaultBindingMode: bindingMode.twoWay })
  value: string;
}

【讨论】：