How to bind a object to update the value using plain js?

Question

I have a object with name value. Is it possible to bind that value to html element? - like angularjs

if so what is the correct way? or is it not possible?

here is my demo :

var ob = {};

ob.name = "Testing";

$('div').text(ob.name);

$('button').on('click', function(){

 ob.name = "Update Name";
  
  console.log( ob.name ) //name updates

})

button{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1></h1> <!-- on click nothing updates automatically -->
</div>
<button>Click Here</button>

`$('div').text(ob.name);` will update the text..You do not have that in click handler.. You are looking for something like `two-way-binding` but it does not happen on its own! — Rayon, Mar 29 '16 at 05:41
This might help: http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript — Rajesh, Mar 29 '16 at 05:44

CodeFanatic · Answer 1 · 2016-03-29T05:59:29.517

JavaScript itself doesnt support bidirectionalBinding from scratch.

To make your example work simply add the expression, that you have already figured out correct, to your onClickFunction.

var ob = {};

ob.name = "Testing";
$('div').text(ob.name);


$('button').on('click', function(){

 ob.name = "Update Name";
        $('div').text(ob.name); <!-- add here -->
  
  console.log( ob.name ) //name updates

})

button{
  border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1></h1> 
</div>
<button>Click Here</button>

Just to clarify! It is possible to implement something that you could call bidirectionalBinding, but thats not what you want to do using plain javascript! It would mean implementing eventListeners on your textValue etc.

the question look like to bid the data. the one you given the idea is not connected to his question — 3gwebtrain, Mar 29 '16 at 05:59
@3gwebtrain I am having trouble in understanding you. Is there something wrong about my answer? — CodeFanatic, Mar 29 '16 at 06:01

score 1 · Accepted Answer · answered Mar 29 '16 at 06:08

Javascript allows the creation of object "properties" where reading or writing can execute user-defined code.

What you can do is creating the HTML node and a Javascript object with a property so that when you write to the property the code updates the HTML node:

var d = document.createElement("div");
document.body.appendChild(d);
var obj = {get value()  { return d.textContent; },
           set value(x) { d.textContent = x; }};
obj.value = "foo"; // Will also update d content

Note that a property that allows writing needs a place where to store the data... in the above I used directly d.textContent so the two are actually synchronized (changing obj.value changes the DOM node and vice versa).

How to bind a object to update the value using plain js?

2 Answers2