Observable binding data to the controls using WinJS.Bind

Goal : Observable binding data to the controls using WinJS.Bind from the JS. Let’s bind a Student data to the text boxes located in the Html file. We will make this binding observable. On any changes made to the data will get reflected in the controls automatically.

Add a Student page control (Student.Html, Student.CSS, Student.JS) to the project. We will basically deal with Student.JS and Student.Html here.

Student.Html

– Add a element with few tex boxes. Here we have taken 3 text boxes to bind 3 fields of the student class. – Add a button. On click of the button the Student data gets changed. It will automatically reflected in the controls.

       Student Id
          

        Student Name
  
      Student Height
           
    
  

Student.JS

  // Get the parent  element    
var students = document.getElementById("students");  // Student data
   var student = {  
                   studId:1,  
                   studName: "Nirmal",
                   studHeight: "5ft 5inches"
                   };   // Bind data to the parent div
       WinJS.Binding.processAll(students, student);
   // Make it observable   
       var observableCol = WinJS.Binding.as(student);
   // Handle button click   
         document.getElementById("btnChngVal").addEventListener("click", function () {
              if (observableCol.studId === 1)
                {
                  observableCol.studId = 2;
                  observableCol.studName = "Kiran";
                  observableCol.studHeight = "5ft 8inches";
                  }
                   else
                  {  
                 observableCol.studId = 1;
                  observableCol.studName = "Nirmal";
                  observableCol.studHeight = "5ft 5inches";
                     }
                 });

 Now let’s debug the app to see the data observable binding.