2
はじめ結合複合オブジェクト
私の目標は、私はアプリケーション全体で再利用できるようにアウレリアにカスタム要素を作成することです。
私は意志がオペレータに関する情報を保持し、私の計画はいくつかでそれを再利用することである オペレータ詳細（ オペレータdetail.htmlと オペレータdetail.js）と呼ばれるコンポーネントを作成しました。この文脈ではアプリケーションの場所。このユースケースで
Iは、operatorDetailsとlegalRepresentativeへの参照を保持electornicRegistrationFormオブジェクトを持っています。両方のインスタンスは、のelectornicRegistrationFormモジュールに注入され、後で印刷される文書を作成するためのウィザードの一部として使用されます。
このelectronicRegistraionFormは、operatorstepコンポーネントに注入されます。私はoperatorStep.htmlに含まれており、そのコンポーネントを確認しました
オペレータdetail.htmlコンポーネントが正しくレンダリングされています。オブジェクトオペレータの値がIN（バインドさ）が表示されるようにオペレータdetail.html成分にoperatorStep.jsから（バインド）プロパティオペレータを渡す方法
通報
二者拘束力のある方法。次の例では
は、値からthis.operator.firstName「演算子のステップからの最初の名前は」オペレータdetail.htmlコンポーネントに表示されません。
ソースコード
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;
}
}
オペレータ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);
}
}
オペレータ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。あなたはViewModelにせずにビューを持っている場合、HTMLテンプレートにバインド可能なプロパティを宣言
<template>
<require from="common/operator-detail"></require>
<form validation-renderer="bootstrap-form">
<operator-detail operatorvalue.bind="operator"></operator-detail>
</form>
</template>