上傳csv的困難與淘汰js表格（ASP MVC）

Question

我一直在處理這兩個教程，但我很難合併在一起，以獲得一個上傳csv填充表。這很可能是我對視圖模型缺乏瞭解。

下面是從淘汰賽JS網站淘汰賽JS可編輯的表格教程：KnockoutJS: Editable Grid Table

而這裏的教程上傳CSV我引用：

KnockoutJS - Upload CSV

這裏的javascript代碼我一直在努力將csv上傳到我的表格。我不斷收到「JavaScript運行時錯誤：無法獲取未定義或空引用的屬性」推送「 - 我在註釋中標記了問題點。正如你所看到的，我在視圖模型中遇到了麻煩。

<script> 
    var UserModel = function (users) { 
     var self = this; 
     self.users = ko.observableArray(users); 

     self.addUser = function() { 
      self.users.push({ 
       id: "", 
       firstName: "", 
       lastName: "" 
      }); 
     }; 

     self.removeUser = function (user) { 
      self.users.remove(user); 
     }; 

     self.save = function (form) { 

      sendData = ko.toJSON(self.users); 


      $.ajax({ 
       url: '/Users/CreateMultiple', 
       contentType: 'application/json', 
       async: true, 
       type: 'POST', 
       dataType: 'json', 
       data: sendData, 
       error: function (jqXHR, textStatus, errorThrown) { 
        console.log("FAIL: " + errorThrown); 
       }, 
       success: function (data, textStatus, jqXHR) { 
        console.log("SUCCESS"); 
       } 
      }); 


     }; 
    }; 

    var viewModel = new UserModel([ 
     { id: "", firstName: "", lastName: "" } 
    ]); 
    ko.applyBindings(viewModel); 

    // Activate jQuery Validation 
    $("form").validate({ submitHandler: viewModel.save }); 


    ///// 
    /////Upload CSV 
    ///// 


    $('#lnkUpload').click(function() { 
     var FileToRead = document.getElementById('UserFile'); 
     if (FileToRead.files.length > 0) { 
      var reader = new FileReader(); 

      reader.onload = Load_CSVData; 

      reader.readAsText(FileToRead.files.item(0)); 

     } 
    }); 

    function Load_CSVData(e) { 


     CSVLines = e.target.result.split(/\r\n|\n/); 
     $.each(CSVLines, function (i, item) { 

      var element = item.split(","); 
      var csvID = (element[0] == undefined) ? "" : element[0].trim(); 
      var csvFirstName = (element[1] == undefined) ? "" : element[1].trim(); 
      var csvLastName = (element[2] == undefined) ? "" : element[2].trim(); 



      UserModel.users.push(new UserModel()//here's my problem 
       .id(csvID) 
       .firstName(csvFirstName) 
       .lastName(csvLastName) 

      ) 
     }); 
    } 

</script> 

Answer 1

我能夠識別完全合格的可觀測陣列而這又使工作：

function Load_CSVData(e) { 
    CSVLines = e.target.result.split(/\r\n|\n/); 
       $.each(CSVLines, function (i, item) { 

        var element = item.split(","); 
        var csvID = (element[0] == undefined) ? "" : element[0].trim(); 
        var csvFirstName = (element[1] == undefined) ? "" : element[1].trim(); 
        var csvLastName = (element[2] == undefined) ? "" : element[2].trim(); 
     viewModel.users.push({ 
           id: csvID, 
           firstName: csvFirstName, 
           lastName: csvLastName 
          }); 
}