Display the Text: {{enteredText}} Ca" /> Display the Text: {{enteredText}} Ca" /> Display the Text: {{enteredText}} Ca"/>

CanJS - Two way binding

143 views Asked by At

How to do two-way binding using CanJS?

Enter the Text : <input type="text" name="name" can-value="enteredText" />
Display the Text: {{enteredText}}

Can show multiple approaches? Using ViewModel ?

2

There are 2 answers

0
BairDev On

Please have a look here (docu for v2 and for v3).

At least if you use the (nowadays recommended) components approach you can write

<my-component {(some-prop)}="value"/><!-- v2 -->
<!-- syntax for v3 remains: {(prop)}="key" for two-way binding. -->

This is from the documentation.

0
twoLeftFeet On

can-value was the old method in v2. In Canjs 4.0, you would do two way binding like this:

Enter the Text : <input type="text" name="name" value:bind="enteredText" />
Display the Text: {{enteredText}}

See: https://canjs.com/doc/can-stache-bindings.twoWay.html

Here's a jsbin demonstrating the syntax:

http://jsbin.com/vogavevico/edit?html,js,console,output