title: Knockout template binding does not display data on UI
body: <p>I am trying to use template binding to toggle between two templates. I have a working fiddle <a href="http://jsfiddle.net/X9rRa/424/" rel="nofollow">here</a></p>
  
  <p>I went one step ahead and instead of hard coding the data as in JFiddle, I made a connection to DB and fetched the data. But the data is not showing on the UI. I have checked the Db connection and it's working fine. The reason it's not working is because in my JSFiddle, I am using an older version of knockout which supports calling the loadData() function like this: </p>
  
  <pre><code>&lt;div class="container" data-bind="load: loadData()"&gt;
  </code></pre>
  
  <p>How can I accomplish this in knockout version 3 ? </p>
  
  <p><strong>UI</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="main.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script type='text/javascript' src='knockout-3.1.0.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container" data-bind="load: loadData()"&gt;
    &lt;table data-bind="visible: people().length &gt; 0" class="students"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Age&lt;/th&gt;
                &lt;th&gt;Remove&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody data-bind="template: { name: templateToUse, foreach: people}"&gt;&lt;/tbody&gt;
    &lt;/table&gt;  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script type='text/javascript' src='studentapp.js'&gt;&lt;/script&gt;
  
  &lt;script id="itemTmpl" type="text/html"&gt;
  &lt;tbody data-bind="foreach: people"&gt;
            &lt;tr&gt;
                    &lt;td&gt;
                      &lt;span data-bind="text: name"&gt;&lt;/span&gt;
                  &lt;/td&gt;
  
                &lt;/td&gt;
                &lt;td&gt;
                   &lt;span data-bind="text: age"&gt;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td class="buttons"&gt;
                  &lt;button &gt;Edit&lt;/button&gt;
                  &lt;button &gt;Delete&lt;/button&gt;
              &lt;/td&gt;         
            &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/script&gt;
  &lt;script id="editTmpl" type="text/html" &gt;
  &lt;tbody data-bind="foreach: people"&gt;
            &lt;tr&gt;
                    &lt;td&gt;
                      &lt;span data-bind="text: name"&gt;&lt;/span&gt;
                  &lt;/td&gt;
  
                &lt;/td&gt;
                &lt;td&gt;
                   &lt;span data-bind="text: age"&gt;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td class="buttons"&gt;
                  &lt;button &gt;Edit&lt;/button&gt;
                  &lt;button &gt;Delete&lt;/button&gt;
              &lt;/td&gt;         
            &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var isValueChanged = false; 
  var shouldShowRow = ko.observable(false); 
  
  //wrapper for an observable that protects value until committed
  ko.protectedObservable = function(initialValue) {
      //private variables
      var _temp = initialValue;
      var _actual = ko.observable(initialValue);
  
      var result = ko.dependentObservable({
          read: _actual,
          write: function(newValue) {
              _temp = newValue;
          }
      }).extend({ notify: "always" }); //needed in KO 3.0+ for reset, as computeds no longer notify when value is the same
  
      //commit the temporary value to our observable, if it is different
      result.commit = function() {
          if (_temp !== _actual()) {
              _actual(_temp);
              isValueChanged = true;           
          }      
      };
  
      //notify subscribers to update their value with the original
      result.reset = function() {
          _actual.valueHasMutated();
          _temp = _actual();
      };
  
      return result;
  };
  
  var personModel = function(id, name, age){
    var self = this;  
    self.id = ko.observable(id); 
    self.name = ko.protectedObservable(name);
    self.age = ko.protectedObservable(age);     
  };
  
  
  var model = function () {
      var self = this;
      this.person_name = ko.observable("");
      this.person_age = ko.observable("");
      this.people = ko.observableArray([]);
      self.selectedPerson = ko.observable();
  
          self.loadData = function () {
          //1) RETRIEVE STUDENT INFO
           //fetch existing student data from database 
            $.ajax({
                type: 'POST',
                url : 'refresher_save.php',
                dataType: 'json',
                success: function(data){ //json string of the student records returned from the server             
                    for(var x in data){
                        //student details
                        var id = data[x]['id'];
                        var name = data[x]['name'];
                        var age = data[x]['age'];
                        //add student record to observable array 
                        self.people.push(new personModel(id, name, age));
  
                    }               
                }
            });
  
            };
           self.templateToUse = function(item) {
          return self.selectedPerson() === item ? "editTmpl" : "itemTmpl";
      };
  
  };
  
  
    ko.applyBindings(new model());
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;?php
  //DB variables
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "student";
  
  //Other variables 
  $action = (!empty($_POST['action'])) ? $_POST['action'] : '';
  
  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  $student = (!empty($_POST['student'])) ? $_POST['student'] : '';
  if(!empty($student)){
      $name = $student['name'];
      $age = $student['age']; 
  }
  
  // Check connection
  if ($conn-&gt;connect_error) {
      die("Connection failed: " . $conn-&gt;connect_error);
  }
  else{
  //only select student records which aren't deleted
                    $students = $conn-&gt;query("SELECT * FROM students WHERE status = 1");
                    $students_r = array();              
                    while($row = $students-&gt;fetch_array()){
                        //default student data
                        $id = $row['ID'];
                        $name = $row['name'];
                        $age = $row['age'];
  
                        //build the array that will store all the student records
                        $students_r[] = array(
                            'id' =&gt; $id, 'name' =&gt; $name, 'age' =&gt; $age
  
                        );
                    }
                    echo json_encode($students_r);  
  }
  </code></pre>