aurelia - 将复杂对象绑定(bind)到组件

Question

简介

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

在此上下文中，我创建了名为 operator-detail 的组件(operator-detail.html 和 operator-detail.js)，其中将保存有关运算符(operator)的信息，我的计划是在应用程序的多个地方重用它。

在这个用例中，我有electornicRegistrationForm对象，它保存对operatorDetails和legalRepresentative的引用。这两个实例都被注入(inject)到 electornicRegistrationForm 模块中，并将用作向导的一部分，允许用户创建稍后打印的文档。

这个 ElectronicRegistraionForm 被注入(inject)到operatorStep 组件中。

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

问题

如何将属性 operator 从 operatorStep.js 传递(绑定(bind))到 operator-detail.html 组件，以便对象中的值>操作符以双向绑定(bind)方式显示(绑定(bind))。

在以下示例中，this.operator.firstName“运算符步骤中的名字”的值不会显示在 operator-detail.html 组件中。 p>

源代码

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

operator-detail.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);
  }          
}

operator-detail.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>

operatorStep.js

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

operatorStep.html

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

Answer 1

在模板上声明可绑定(bind)属性适用于没有 ViewModel 的 View 。

operator-detail.html 中的 bindable="operatorvalue" 不起作用，因为您还为此元素定义了一个 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>

或者，您可以通过简单地删除 operator-detail.js 并将验证内容放在其他地方来使模板中的可绑定(bind)属性声明起作用。然后，您可以像这样更新运算符(operator)对象，而不是将 OperatorDetail 注入(inject)注册表单:

import { LegalRepresentative } from 'common/legalRepresentative';
import { inject } from 'aurelia-framework';

@inject(LegalRepresentative)
export class ElectronicRegistrationForm {
    constructor(legalRepresentative) {
        this.operator = {};
        this.legalRepresentative = legalRepresentative;
    }
}

两种方法都可以。

不使用 ViewModel 意味着将验证逻辑放入 electronicsRegistrationForm.js 中，这也意味着需要编写的代码更少。

使用 ViewModel 可以为您提供更多封装，如果您的特定于 View 的逻辑比此处显示的更复杂，这通常是更可取的。

编辑

如果您使用的是 Google Chrome，我强烈建议使用 aurelia context扩大。然后，您可以检查 html 并看到 operator 在 operator-step 中定义，但 operatorvalue 在 operator-detail< 中未定义/强>。这会告诉您 operatorvalue 可绑定(bind)声明一定是错误的，而不是其他错误。