CODEWITHSUNDEEP
aurelia
J.Hudler
J.Hudler

Reputation: 1258

Aurelia binding between component and sub-component not reflecting changes

I have a text input in both main view and in a custom component. I want the text of them to be in sync (more specifically, from main -> sub component).

Here is what I've got:

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

But myComponentText won't update. What am I missing?

Plunker:

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

Upvotes: 1

Views: 1231

Answers (2)

Denis Gulin
Denis Gulin

Reputation: 111

Try to check your code here (do not use such naming for properties): http://plnkr.co/edit/qPkDqnLKa0I9nzJ0wTsc?p=preview

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

and

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

Upvotes: 4

doeck
doeck

Reputation: 265

Try 

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

I'm not sure if it's the rule but I made the experience that 'bind' only works two-way on standard attributes.

Upvotes: 0

Related Questions