jquery - Knockout JS 并传入一个已经存在的数组

Question

我调用一个 API 来检索和解析 JSON，此时我已经实例化了 LIST3，并且尝试将此对象数组传递到 ko.observable 函数中。我已经按照教程学习了，似乎在这里被难住了。

如果我按照教程建议使用构造函数手动传递值，我可以显示数据，所以逻辑似乎没问题。我是否正在尝试做一些 KO 无法执行的事情？

代码

var LIST3 = [];
var coreUrl = "https://cors.io/?http://rundistance.azurewebsites.net/api/";
var listUrl = coreUrl + "RunnerService";

$(document).ready(
    function () {
        $.getJSON(listUrl)
                .done(function (data) {
                    $.each(data, function (i, item) {
                        LIST3.push(item);
                        });
                      });
                    });

function addRunner(){

var self = this;

self.runner = ko.observableArray(LIST3);

}

ko.applyBindings(new addRunner());

标记

<div class = "unit3 unit">
    <h1>Drawing from Web API and Display with Knockout.JS</h1>
    <h3>Results</h3>
    <div id = "detail3">
      <p id = "name3"></p>
      <p id = "LRDistance3"></p>
      <p id = "LRTime3"></p>
      <p id = "LRDate3"></p>
    </div>
    <table id = "unit" data-bind = "foreach: runner">
      <tr>
      <td data-bind="text: RunnerName"></td>
      </tr>
    </table>
</div>

Answer 1

您的代码在将本地数组 LIST3 分配给 self.runner 可观察数组后加载它。您需要直接从 $.getJSON 调用的结果加载可观察数组。

var coreUrl = "https://cors.io/?http://rundistance.azurewebsites.net/api/";
var listUrl = coreUrl + "RunnerService";

$(document).ready(function () {
    function AddRunner(){
        var self = this;
        self.runner = ko.observableArray([]);

        function loadRunner() {
            $.getJSON(listUrl)
                    .done(function (data) {
                        self.runner(data);
                    });
        }

        loadRunner();
    }

    ko.applyBindings(new AddRunner());
}