淘汰賽失效：外部Json文件的價值

Question

我正在嘗試使用淘汰賽創建電子表格類型的公式操作，但淘汰賽無效。

我的數據是從外部JSON文件

JSON文件

{ 
    "info": [ 
     { 
      "Name":"Noob Here", 
      "Major":"Language", 
      "Sex":"Male", 
     "English":"15", 
     "Japanese":"5", 
     "Calculus":"0", 
     "Geometry":"20" 
     } 
    ] 
} 

代碼

<script type="text/javascript"> 
    function loadData(fileName) { 
     // getting json from a remote file 
     // by returning the jqXHR object we can use the .done() function on it 
     // so the callback gets executed as soon as the request returns successfully 
     var data = $.getJSON(fileName + ".json"); 
     return (data); 

    } 

    function fillDataTable(data) { 
     // iterate over each entry in the data.info array 
     $.each(data.info, function(index, element) { 
      // append it to the table 
      $("#div1").append("<tr><td>" + element.Name + "</td><td>" + element.Major + "</td><td>" + element.Sex + "</td><td>" + "<input data-bind='value: eng' value=" + element.English + "></td><td>" + "<input data-bind='value: jap' value=" + element.Japanese + "></td><td>" + "<input data-bind='value: cal' value=" + element.Calculus + "></td><td>" + "<input data-bind='value: geo' value=" + element.Geometry + "></td><td>" + "<strong data-bind='text: total'></td>") 
     }); 
    } 

    $(document).ready(function() { 

     // the file's name. "Data" in this example. 
     var myFile = "Data2"; 

     loadData(myFile).done(function(data) { 
      // check if we acutally get something back and if the data has the info property 
      if (data && data.info) { 
       // now fill the data table with our data 
       fillDataTable(data) 
      } 
     }); 

     // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI 
     function AppViewModel() { 
      this.eng = ko.observable("0"); 
      this.jap = ko.observable("0"); 
      this.cal = ko.observable("0"); 
      this.geo = ko.observable("0"); 

      this.total = ko.computed(function() { 
       var tot = parseFloat(this.eng()) + parseFloat(this.jap()) + parseFloat(this.cal()) + parseFloat(this.geo()); 
       return (tot); 
      }, this); 

     } 

     // Activates knockout.js 
     ko.applyBindings(new AppViewModel()); 
    }); 
</script> 

我的HTML

<table cellspacing="1" id="div1"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Major</th> 
      <th>Sex</th> 
      <th>English</th> 
      <th>Japanese</th> 
      <th>Calculus</th> 
      <th>Geometry</th> 
      <th>Total</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

我從JSON文件中獲取數據。但淘汰賽不起作用。

撥弄代碼：http://jsfiddle.net/KGKpw/

注：我加了小提琴只是整齊地顯示代碼。

Answer 1

將您的數據複製到視圖模型的可觀察屬性中更常見，然後將這些屬性綁定到您的html元素。您在js中創建html，而不是在前端使用knockout（如果您有多個結果來創建行，則使用foreach）。同樣，當你綁定它們時，你就直接在html中設置值，使用你的數據對象。有人猜測，綁定是在之後的上制定的，因爲您已經在html中設置了值，並且所有可觀察值均設置爲零，這會覆蓋您直接在html中設置的值。

嘗試將html移動到您的視圖中，而不是在您的視圖模型中，將數據從您的js對象複製到視圖模型，然後僅使用挖空綁定將視圖鏈接到視圖模型。

Answer 2

您需要在html中使用data-bind將viewmodel綁定到視圖。

更新您的提琴： http://jsfiddle.net/KGKpw/1/