Question

我调用了一个用于检索和解析JSON的API，这时我实例化了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不是可观察的数组，因此将新项目推入其中不会导致更新。您从list3创建一个可观察到的数组，称为Runner。建议您将项目推入流道，或者从一开始就将LIST3设置为可观察的数组。

var LIST3 = ko.observableArray([]);

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

Answer 2

您的代码在分配给has_find<Container, Key>::value可观察数组之后，正在加载本地数组LIST3。您需要直接从$ .getJSON调用的结果中加载可观察数组。

self.runner

淘汰JS并传入一个已经存在的数组

2 个答案: