Question

我正在尝试使用模板绑定在两个模板之间切换。我有一个工作小提琴here

我向前迈了一步，而不是像在JFiddle中那样对数据进行硬编码，而是建立了与DB的连接并获取了数据。但是数据没有在UI上显示。我检查了Db连接，它工作正常。它不起作用的原因是因为在我的JSFiddle中，我使用的是旧版本的knockout，它支持调用loadData（）函数，如下所示：

<div class="container" data-bind="load: loadData()">

如何在淘汰赛版本3中完成此操作？

UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="main.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script type='text/javascript' src='knockout-3.1.0.js'></script>
</head>
<body>
<div class="container" data-bind="load: loadData()">
  <table data-bind="visible: people().length > 0" class="students">
      <thead>
          <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Remove</th>
          </tr>
      </thead>
      <tbody data-bind="template: { name: templateToUse, foreach: people}"></tbody>
  </table>  
</div>
</body>
</html>
<script type='text/javascript' src='studentapp.js'></script>

<script id="itemTmpl" type="text/html">
<tbody data-bind="foreach: people">
          <tr>
                  <td>
                    <span data-bind="text: name"></span>
                </td>

              </td>
              <td>
                 <span data-bind="text: age"></span>
              </td>
              <td class="buttons">
                <button >Edit</button>
                <button >Delete</button>
            </td>         
          </tr>
</tbody>
</script>
<script id="editTmpl" type="text/html" >
<tbody data-bind="foreach: people">
          <tr>
                  <td>
                    <span data-bind="text: name"></span>
                </td>

              </td>
              <td>
                 <span data-bind="text: age"></span>
              </td>
              <td class="buttons">
                <button >Edit</button>
                <button >Delete</button>
            </td>         
          </tr>
</tbody>
</script>

JS：

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());

PHP

<?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->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
else{
//only select student records which aren't deleted
                  $students = $conn->query("SELECT * FROM students WHERE status = 1");
                  $students_r = array();              
                  while($row = $students->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' => $id, 'name' => $name, 'age' => $age

                      );
                  }
                  echo json_encode($students_r);  
}

Knockout模板绑定不会在UI上显示数据

0 个答案: