2017-09-19 13 views
0

カスタムモデルの入力データを親モデルプロパティにバインドしようとしています: カスタム要素のthis.fieldValueは、最終的にコンテナのregistration.firstNameプロパティにバインドされる必要があります。親ページ。 関連のコードを参照してください: これは、カスタム要素のHTMLです:カスタムモデル入力へのモデルモデルプロパティのバインド

<template> 
    <label> 
     ${title}<input name.bind="fieldName" custom-type="text" 
       title.bind="title" focusout.trigger="focusoutAction()" />       
    </label> 
</template> 

これは、ビューモデル(簡体字)です:カスタム要素で

import {inject, bindable, customElement, bindingMode} from 
'aurelia-framework'; 

@customElement('form-input') 
@inject(Element) 
export class FormInputCustomElement { 
@bindable({ defaultBindingMode: bindingMode.twoWay }) value; 
@bindable title; 
@bindable customType; 
@bindable placeHolder; 
@bindable fieldName; 
@bindable onFocusout; 



constructor(element) { 
    this.element = element; 
    this.input = null; 
    this.fieldValue = ''; 
} 

bind(bindingContext) { 
    this.input = this.element.getElementsByTagName("input")[0]; 
    this.input.type = this.customType || "text"; 
    this.input.placeholder = this.placeHolder || ""; 
} 

    focusoutAction() { 
    this.fieldValue = this.input.value; 
    this.onFocusout(); 
    } 
} 

私はthis.fieldValueが得ることがわかります入力テキスト。 これは、コンテナ関連するコードです:問題は、私はcreateNewAccount機能に到達したときに、 this.registration.firstNameが空であることである

import { inject, bindable } from 'aurelia-framework'; 
export class AccountRegistration { 

constructor() { 
    this.initRegistration(); 
} 

initRegistration() { 
    this.registration = {}; 
    this.registration.firstName = ''; 
} 

createNewAccount() { 
var a = this.registration.firstName; 
} 

<template> 
<require from="./../../formControllers/formInput"></require> 

    <div> 
    ${fieldValue}<form-input name="firstName" id="firstName" field- 
    value.bind="registration.firstName" title="First Name" 
    validate="registration.firstName" place-holder="Enter first name" field- 
    name="firstName" on-focusout.call="validateInput()" /> 
</div> 

<button type="button" click.delegate="createNewAccount()">Create New 
Account</button> 

そして、これはクラス関連するコードですカスタムエレメントの入力テキストに設定されているカスタムエレメント フィールド値(camelCaseのfieldValue)プロパティにバインドされています。 ここで何が間違っていますか?

答えて

0

私はこれがあなたのテンプレートでも@bindable({ defaultBindingMode: bindingMode.twoWay }) fieldValue;

<input value.bind="fieldValue" />

あなたはそれがバインドされるフォームで値をフィールドするregistration.firstnameをバインドする必要があり、問題が @bindable({ defaultBindingMode: bindingMode.twoWay }) value;

だと思います入力上の値に置き換えます。

関連する問題