結合複合物的成分

我的目標是在Aurelia路上，以創建自定義元素，這樣我可以在整個應用程序重複使用。

在這種情況下，我創建的組件稱爲操作細節（運營商detail.html和運營商detail.js），其中將包含有關運營商的信息，我的計劃是重新使用它在幾個地方在申請。

在這種使用情況下我有electornicRegistrationForm對象持有參考operatorDetails和legalRepresentative。這兩個實例都被注入到electornicRegistrationForm模塊中，並將作爲嚮導的一部分使用，允許用戶創建一個將在稍後打印的文檔。

This electronicRegistraionForm注入operator步驟組件。我已經包括在operatorStep.html並確認組件

運營商detail.html組件已正確呈現。

問題

如何通過（綁定）屬性操作者從operatorStep.js到操作者detail.html組件，以便從對象值操作者顯示（綁定）的雙向綁定的方式。

在下面的例子中，從價值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。HTML

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

來源

2016-09-24 ITGoran

聲明模板的綁定屬性是當你有沒有一個視圖模型視圖。

您的運營商詳細信息中的bindable="operatorvalue"不起作用，因爲您也有爲此元素定義的ViewModel。如果你想通過這種方式保持它，然後簡單地從模板中刪除bindable="operatorvalue"，而是宣告它在你的視圖模型像這樣：

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

運營商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>

或者，你可以通過簡單地刪除運營商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和看到操作在操作步驟定義，但operatorvalue在操作細節不確定的。這會告訴你，可綁定聲明的運算符值必須是錯誤的，而不是別的。

來源

2016-09-25 13:02:16

結合複合物的成分

回答

相關問題