使用jQuery JSON进行数据绑定的敲除ajax响应问题

我有一个使用基于JSON的静态JSON格式数据的示例，但当我通过Ajax解析相同的数据时，它不起作用。

HTML代码：

<table>
    <thead>
        <tr><th>File Name</th></tr>
    </thead>
    <tbody data-bind="foreach: attachments">
      <tr><td data-bind="text: Filename" /></tr>
    </tbody>
</table>

function testAjax(handleData) {

        $.ajax({
            url: 'form2.php',
            type: "post",
            data: '',
            dataType: 'json',
            success: function(data){
                handleData(data);
            },
            error:function(data){
                alert('Failed');
            }
        });
}

function localData(){
    var data = [{"Filename":"f8.doc"},{"Filename":"f3.doc"}];
      return data;
}

$(function () {
  var ViewModel = function() {
    var self = this;

    self.getAttachments = function() {
        testAjax(function(output){
            var arr = [];
            $.each(output, function (i) {
                arr.push(new product(output[i]));
            });
            return arr;
        }); 
        /*var test = localData();
            var arr = [];
            $.each(test, function (i) {
                arr.push(new product(test[i]));
            });
        return arr;*/
    }

    self.attachments = ko.observableArray(self.getAttachments());

    self.refresh = function() {
      self.attachments(self.getAttachments());        
    }
  };

  ko.applyBindings(new ViewModel());
});
var product = function (data) {
    return {
        Filename: ko.observable(data.Filename)
    };
};

$data = array(
            "0"=>array(
                "Filename"=>"f8.doc"
            ),
            "1"=>array(
                "Filename"=>"f2.doc"
            )
            );

$encode = json_encode($data);

echo $encode;

[{"Filename":"f8.doc"},{"Filename":"f2.doc"}]

在这个示例代码中，您可以看到一个名为“localData”的函数（它被注释）。它包含基于JS的格式化JSON数据集。但当我使用ajax解析相同的数据时，使用“testAjax”函数调用。它有以下代码和结果。

代码：

<table>
    <thead>
        <tr><th>File Name</th></tr>
    </thead>
    <tbody data-bind="foreach: attachments">
      <tr><td data-bind="text: Filename" /></tr>
    </tbody>
</table>

function testAjax(handleData) {

        $.ajax({
            url: 'form2.php',
            type: "post",
            data: '',
            dataType: 'json',
            success: function(data){
                handleData(data);
            },
            error:function(data){
                alert('Failed');
            }
        });
}

function localData(){
    var data = [{"Filename":"f8.doc"},{"Filename":"f3.doc"}];
      return data;
}

$(function () {
  var ViewModel = function() {
    var self = this;

    self.getAttachments = function() {
        testAjax(function(output){
            var arr = [];
            $.each(output, function (i) {
                arr.push(new product(output[i]));
            });
            return arr;
        }); 
        /*var test = localData();
            var arr = [];
            $.each(test, function (i) {
                arr.push(new product(test[i]));
            });
        return arr;*/
    }

    self.attachments = ko.observableArray(self.getAttachments());

    self.refresh = function() {
      self.attachments(self.getAttachments());        
    }
  };

  ko.applyBindings(new ViewModel());
});
var product = function (data) {
    return {
        Filename: ko.observable(data.Filename)
    };
};

$data = array(
            "0"=>array(
                "Filename"=>"f8.doc"
            ),
            "1"=>array(
                "Filename"=>"f2.doc"
            )
            );

$encode = json_encode($data);

echo $encode;

[{"Filename":"f8.doc"},{"Filename":"f2.doc"}]

来自Ajax的结果：

<table>
    <thead>
        <tr><th>File Name</th></tr>
    </thead>
    <tbody data-bind="foreach: attachments">
      <tr><td data-bind="text: Filename" /></tr>
    </tbody>
</table>

function testAjax(handleData) {

        $.ajax({
            url: 'form2.php',
            type: "post",
            data: '',
            dataType: 'json',
            success: function(data){
                handleData(data);
            },
            error:function(data){
                alert('Failed');
            }
        });
}

function localData(){
    var data = [{"Filename":"f8.doc"},{"Filename":"f3.doc"}];
      return data;
}

$(function () {
  var ViewModel = function() {
    var self = this;

    self.getAttachments = function() {
        testAjax(function(output){
            var arr = [];
            $.each(output, function (i) {
                arr.push(new product(output[i]));
            });
            return arr;
        }); 
        /*var test = localData();
            var arr = [];
            $.each(test, function (i) {
                arr.push(new product(test[i]));
            });
        return arr;*/
    }

    self.attachments = ko.observableArray(self.getAttachments());

    self.refresh = function() {
      self.attachments(self.getAttachments());        
    }
  };

  ko.applyBindings(new ViewModel());
});
var product = function (data) {
    return {
        Filename: ko.observable(data.Filename)
    };
};

$data = array(
            "0"=>array(
                "Filename"=>"f8.doc"
            ),
            "1"=>array(
                "Filename"=>"f2.doc"
            )
            );

$encode = json_encode($data);

echo $encode;

[{"Filename":"f8.doc"},{"Filename":"f2.doc"}]

---

“testAjax”和“localData”在“

返回{Filename:ko.observable（data.Filename）}之前的“product”中显示结果警报（data.Filename）“但是Ajax不会在页面上显示数据，而其他基于JS的本地格式化显示对我来说非常奇怪。
在您的本地数据示例中，当您初始化
self.attachments
时，数据已经在这里，所以没有问题

在ajax示例中，您不能期望返回数据，这就是为什么要使用回调（
handleData
）

您需要首先初始化
附件
observableArray，然后更新它：

var ViewModel = function() {
  var self = this;

  self.attachments = ko.observableArray();

  self.getAttachments = function() {
      testAjax(function(output){
          self.attachments.removeAll();
          $.each(output, function (i) {
              self.attachments.push(new product(output[i]));
          });
      }); 
  }

  /* no more needed, call getAttachments directly
  self.refresh = function() {
    self.attachments(self.getAttachments());        
  }*/
};

@UMI oops，忘记在每个循环中替换
arr
。答案已更新，您可以再试一次吗？效果很好，非常感谢：）但我还有一件事需要确认。请访问此URL以获取另一个示例，以自动刷新数据。我在另一个示例中按照您的要求对数据进行了更改，但它无法在另一个示例中工作已插入更正的代码。它在第一次访问页面时起作用，但您会看到有一个按钮用于刷新数据，因此当我单击该按钮时，数据将变为空且不显示任何内容。@UMI为什么在调用getAttachments时需要另一个函数来刷新数据？请注意，我在getAttachment中放置了一个removeAll，您可以删除它