Javascript 使用Knockout.js从Json响应创建表

Javascript 使用Knockout.js从Json响应创建表,javascript,jquery,json,knockout.js,Javascript,Jquery,Json,Knockout.js,我正在尝试使用Json响应和Knockout.js创建一个表 在Javascript中 $(document).ready(function() { $.ajax({ method : "POST", url : "devTestServlet", success : function(data) { ko.applyBindings({ rows : data

我正在尝试使用Json响应和Knockout.js创建一个表

在Javascript中

$(document).ready(function() {

    $.ajax({
        method : "POST",
       url : "devTestServlet",
       success : function(data) {

           ko.applyBindings({ 
               rows : data
               });
       }
       });
});
在HTML中,首先我在标题中导入了脚本:

   <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>  
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
    <link rel="stylesheet" href="css/main.css" type="text/css"></link>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
这是我第一个使用Knockout.js的程序,所以我可能遗漏了一些东西。你能建议一下吗

  • 在库中敲除JS之前放置jQuery

  • 确保
    ko.observearray()

  • 更改:
    ko.applyBindings({rows:data})到:
    行(数据)

  • 你做错了

    您应该添加绑定并更新它们。 它应该看起来有点像这样:

    var HomeModel = function() {
        this.rows = ko.observableArray([]);
    };
    
    $(document).ready(function() {
        var model = new HomeModel();
        ko.applyBindings(model);
    
        $.ajax({
            method : "POST",
           url : "devTestServlet",
           success : function(data) {
               for (var x in data) {
                   model.rows.push(data[x]);
               }
           }
           });
    });
    
    由于“行”现在是一个“observableArray”,它将根据更改更新HTML。 祝你好运

  • jQuery引用应该在knockout.js之前
  • 除此之外,您的代码很好,适合我个人:
  • 我建议将样式表引用放在中,脚本引用放在页面底部的某个位置:

    <head>
        <link rel="stylesheet" href="css/main.css" type="text/css"></link>
    </head>
    <body>
        <content />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>  
        <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
    </body>
    

    $。默认情况下,ajax
    以字符串形式返回响应,knockout需要一个JavaScript对象。因此,您必须将
    dataType
    指定为
    JSON

    $.ajax({
       method: "POST",
       url: "devTestServlet",
       dataType: 'json', 
       success: function(data) {
           ko.applyBindings({ 
               rows : data
           });
       }
    });
    
    或者自己做转换

    $.ajax({
       method: "POST",
       url: "devTestServlet",
       success: function(data) {
           ko.applyBindings({ 
               rows : JSON.parse(data)
           });
       }
    });
    

    代码是按照此链接中的说明编写的:@ChrisDixon您是对的,但我这样使用它,因为在这个场景中,我还将创建一个RowModel并使用model.rows.push(新的RowModel(数据[x]),而不是普通的JSON。您好,您认为我应该在成功时对接收到的数据执行任何操作吗?例如解析或其他操作。成功:函数(数据){//var parsed=JSON.parse(data);var result=data;console.log(result);ko.applyBindings({rows:data});}感谢你们所有人。特别是马尔文!你们的建议非常有效。
    $.ajax({
       method: "POST",
       url: "devTestServlet",
       dataType: 'json', 
       success: function(data) {
           ko.applyBindings({ 
               rows : data
           });
       }
    });
    
    $.ajax({
       method: "POST",
       url: "devTestServlet",
       success: function(data) {
           ko.applyBindings({ 
               rows : JSON.parse(data)
           });
       }
    });