Question

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

HTML CODE ：

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

这是我的JS代码：

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

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

的代码：

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

$encode = json_encode($data);

echo $encode;

Ajax的结果：

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

两个“testAjax”＆amp; “localData在”return {Filename: ko.observable(data.Filename)};之前的“product”中显示结果alert（data.Filename）但是Ajax没有在页面上显示其他本地基于JS的格式化节目的数据，这对我来说很奇怪。

Answer 1

在您的本地数据示例中，初始化self.attachments时，数据已在此处，因此没有问题。

在ajax示例中，您不能期望返回数据，这就是您在此处使用回调（handleData）的原因。

您需要先初始化attachments 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());        
  }*/
};

Knockout数据绑定与jQuery JSON ajax响应问题

1 个答案: