Aurelia 将复杂对象绑定到组件

导言

我的目标是在aurelia中创建自定义元素，以便在整个应用程序中重用它

在此上下文中，我创建了名为operator detail（operator-detail.html和operator detail.js）的组件，它将保存有关operator的信息，我的计划是在应用程序中的多个位置重用它

在这个用例中，我有一个ElectorRegistrationForm对象，它包含对operatorDetails和legalRepresentative的引用。这两个实例都被注入到ElectrorNicRegistrationForm模块中，并将作为向导的一部分使用，使用户可以创建稍后将打印的文档

此电子注册表单被注入到operatorStep组件中

operator-detail.html组件已包含在operatorStep.html中，并确认该组件已正确呈现

问题

如何将属性运算符从运算符step.js传递（绑定）到运算符detail.html组件，以便以双向绑定方式显示（绑定）对象运算符中的值

在下面的示例中，operator-detail.html组件中不会显示this.operator.firstName“operator步骤中的名字”中的值

源代码

电子注册表单.js：

import { OperatorDetail } from 'common/operator-detail';
import { LegalRepresentative } from 'common/legalRepresentative';
import { inject } from 'aurelia-framework';
@inject(OperatorDetail, LegalRepresentative)
export class ElectronicRegistrationForm {
  constructor(operatorDetail, legalRepresentative) {
    this.operator = operatorDetail;
    this.legalRepresentative = legalRepresentative;
  }
}

操作员详细信息.js

import {inject, NewInstance} from 'aurelia-framework';
import {ValidationRules, ValidationController} from 'aurelia-validation';

@inject(NewInstance.of(ValidationController))
export class OperatorDetail {
  constructor(validationController) {
    this.validationController = validationController;
    this.firstName = '';
  }

  attached() {
    ValidationRules
      .ensure('firstName').displayName('Ime').required()
      .on(this);
  }          
}

import { ElectronicRegistrationForm } from 'model/electronicRegistrationForm';
import { inject, NewInstance } from 'aurelia-framework';
import { RegistrationWizard } from 'registration/registrationWizard';
import { WizardStep } from 'registrationSteps/wizardStep';
import { ValidationController } from 'aurelia-validation';
import {bindable, bindingMode} from 'aurelia-framework';

@inject(ElectronicRegistrationForm, RegistrationWizard, NewInstance.of(ValidationController))
export class OperatorStep extends WizardStep {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) operator;

  constructor(electronicRegistrationForm, regWiz, validationController) {
    super(electronicRegistrationForm, regWiz, validationController);
    this.operator = electronicRegistrationForm.operator;
    this.operator.firstName='First name from operator step';
    this.representative = electronicRegistrationForm.legalRepresentative;
  }
}

操作员详细信息.html

<template bindable="operatorvalue">
  <div>
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="firstName" t='first_name'></label>
          <input type="text" class="form-control" id="firstName" value.bind="operatorvalue.firstName ">
        </div>
      </div>          
    </div>
</template>

<template>
  <require from="common/operator-detail"></require>
  <form validation-renderer="bootstrap-form">
    <operator-detail operatorvalue.bind="operator"></operator-detail>
  </form>
</template>

operatorStep.html

<template bindable="operatorvalue">
  <div>
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="firstName" t='first_name'></label>
          <input type="text" class="form-control" id="firstName" value.bind="operatorvalue.firstName ">
        </div>
      </div>          
    </div>
</template>

<template>
  <require from="common/operator-detail"></require>
  <form validation-renderer="bootstrap-form">
    <operator-detail operatorvalue.bind="operator"></operator-detail>
  </form>
</template>

---

在模板上声明可绑定属性适用于没有ViewModel的视图

bindable=“operatorvalue”

在您的operator detail.html中不起作用，因为您还为此元素定义了一个ViewModel。如果希望保持这种方式，只需从模板中删除

bindable=“operatorvalue”

，而是在ViewModel中声明它，如下所示：

import {inject, NewInstance, bindable} from 'aurelia-framework';
import {ValidationRules, ValidationController} from 'aurelia-validation';

@inject(NewInstance.of(ValidationController))
export class OperatorDetail {
    @bindable operatorvalue;

    constructor(validationController) {
        this.validationController = validationController;
        this.firstName = '';
    }

    attached() {
        ValidationRules
            .ensure('firstName').displayName('Ime').required()
            .on(this);
    }          
}

operator detail.html将变成：

<template>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label for="firstName" t='first_name'></label>
                <input type="text" class="form-control" id="firstName" value.bind="operatorvalue.firstName ">
            </div>
        </div>
    </div>
</template>

两种方法都会奏效

例如，在没有ViewModels的情况下工作意味着将验证逻辑放在electronicRegistrationForm.js中，这也意味着要编写的代码更少

使用ViewModels可以提供更多的封装，如果特定于视图的逻辑比这里显示的更复杂，则通常最好使用这种封装

编辑

如果您使用的是Google Chrome，我强烈建议您使用该扩展。然后，您可以检查html并查看运算符在运算符步骤中定义，但运算符值在运算符详细信息中未定义。这将告诉您，运算符value可绑定声明肯定是错误的，而不是其他错误