Question

简介

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

在此上下文中，我创建了名为 operator-detail （ operator-detail.html 和 operator-detail.js ）的组件将保存有关运营商的信息，我的计划是在应用程序的几个地方重复使用它。

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

将 electronicRegistraionForm 注入 operatorStep 组件。

我已经包含在 operatorStep.html 中的

operator-detail.html 组件，并确认该组件已正确呈现。

问题

如何将 operatorStep.js 中的属性运算符传递（绑定）到 operator-detail.html 组件，以便来自object 运算符以双向绑定方式显示（绑定）。

在下面的示例中，来自 this.operator.firstName '来自操作员步骤的名字'的值不会显示在 operator-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.html

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

Answer 1

在模板上声明可绑定属性适用于没有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 并将验证内容放在其他位置来使模板中的可绑定属性声明起作用。然后，不是将OperatorDetail注入到注册表单中，而是可以新建操作符对象，如下所示：

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

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

两种方式都有效。

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

使用ViewModels可以为您提供更多封装，如果您的视图特定逻辑比您在此处显示的更复杂，则通常更可取。

修改

如果您使用的是谷歌浏览器，我强烈建议您使用aurelia context扩展程序。然后，您可以检查html并看到 operator-step 中定义运算符，但 operator-detail <中未定义 operatorvalue / strong>即可。这会告诉你 operatorvalue 可绑定声明必须是错误的，而不是别的。

将复杂对象绑定到组件

1 个答案: