2016-01-22 2 views
1

У меня есть текстовый ввод как в основном виде, так и в пользовательском компоненте. Я хочу, чтобы текст их был синхронизирован (точнее, от основного -> дополнительного компонента).Связывание Aurelia между компонентами и подкомпонентами, не отражающими изменения

Вот что я получил:

app.html

<template> 
    <require from="my-component"></require> 
    Parent App Text: <input type="text" value.bind="mainAppText" /> 
    <br /> 
    <my-component myComponentText.bind="mainAppText"></my-component> 
</template> 

app.js

export class App { 
    mainAppText; 
} 

my-component.html

<template> 
    My Component Text: <input type="text" value.bind="myComponentText" /> 
</template> 

my-component.js

import {bindable} from 'aurelia-framework'; 

export class MyComponent { 
    @bindable myComponentText; 
} 

Но myComponentText не будет обновляться. Что мне не хватает?

Plunker:

http://plnkr.co/edit/infT53A3Y2aGbN9CR7B5?p=preview

ответ

4

Попробуйте проверить свой код здесь (не используйте такие именования для свойств): http://plnkr.co/edit/qPkDqnLKa0I9nzJ0wTsc?p=preview

<my-component text.bind="mainAppText"></my-component> 

и

@customElement('my-component') 
export class MyComponent { 
    @bindable 
    text = '(default)'; 
} 
+0

Спасибо, вот и все. Я считаю, что это связано с тем, что верблюд/паскаль нарушает правила именования атрибутов HTML5. –

0

Попробуйте

<my-component myComponentText.two-way="mainAppText"></my-component> 

Я не уверен, если это правило, но я сделал опыт, что «привязывать» работает только двухсторонние по стандарту атрибутов.

+0

Не работает. Я обновил плункер, добавив подкомпонент с подвязками 'bind' и' two-way'. –

+0

valichek