javascript - 我的对象填充可观察数组中的信息不会显示在我的 View 中

Question

我发现了关于我在这里遇到的问题的类似问题，但没有一个能解决我的问题。

加载页面时，我使用 AJAX 从数据库中检索对象数组。它们具有属性ID、name 和score。

该数组将被放入名为 hs 的变量中。
当我 console.log 变量 hs 时，它会记录数组及其内部对象，因此这不会是问题。 (对吗？)

现在，当我加载页面时，它不会显示这些对象的信息。这就是我遇到的问题!

这是我的 View 模型的一部分:

 function initCanvas() {
    this.playerName = ko.observable("");
    this.chosenLevel = ko.observable();
    this.chosenDifficulty = ko.observable();

    this.availableLevels = ko.observableArray(['Mountains', 'Stars', 'Jungle']);
    this.difficulty = ko.observableArray(['Makkelijk', 'Normaal', 'Moeilijk']);
    this.highscores = ko.observableArray(hs);
    this.personalHighScore = ko.observable(localStorage.getItem("+score") || "Geen record!");

我的 HTML 看起来像这样:

        <table>             
            <tbody data-bind="foreach: highscores">
                <tr>
                    <td><span data-bind="text: name"></span></td>
                    <td><span data-bind="text: score"></span></td>
                </tr>
            </tbody>
        </table>

你们能帮帮我吗？我对 knockout 有点陌生，所以如果这是一个愚蠢的问题，请原谅我。

编辑

这里有一些更多信息:

 hs = [];
    getHighScores();

function getHighScores() {
        var highScoreArray = [];
        $.ajax({
            url: "../php/score_server.php",
            data: {
                "action": "getScore"
            },

            type: 'GET',
            success: function (result) {
                var resultParsed = JSON.parse(result);
                $.each(resultParsed, function (key, value) {
                    hs.push(value);
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            async: true
        });
    }

结果如下所示:

还有一些其他错误我无法修复，例如 getHighScores() 被触发两次，尽管我只调用它一次......而且分数是多少并不重要，我使用 sendHighScore() 函数调用的 PHP 文档将始终将 9 放入数据库中。但稍后我可能会提出另一个问题。

编辑2

$(document).ready(function () {
    var ctx = document.getElementById('canvas').getContext('2d'),
        cW = ctx.canvas.width,
        cH = ctx.canvas.height,
        animateInterval,
        P,
        hs = [],
        paused = false;
    getHighScores();
    ko.applyBindings(new initCanvas());

    function getHighScores() {
        var highScoreArray = [];
        $.ajax({
            url: "../php/score_server.php",
            data: {
                "action": "getScore"
            },

            type: 'GET',
            success: function (result) {
                var resultParsed = JSON.parse(result);
                $.each(resultParsed, function (key, value) {
                    hs.push(value);
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            async: true
        });
    }
    function initCanvas() {
        this.playerName = ko.observable("");
        this.chosenLevel = ko.observable();
        this.chosenDifficulty = ko.observable();

        this.availableLevels = ko.observableArray(['Mountains', 'Stars', 'Jungle']);
        this.difficulty = ko.observableArray(['Makkelijk', 'Normaal', 'Moeilijk']);
        this.highscores = ko.observableArray(hs);
        this.personalHighScore = ko.observable(localStorage.getItem("+score") || "Geen record!");

解决方案

我的固定 HTML:

<table>                     
    <tbody data-bind="foreach: highscores">
        <tr>
            <td><span data-bind="text: name"></span></td>
            <td><span data-bind="text: score"></span></td>
        </tr>
    </tbody>
</table>

我修复的Javascript:

 function getHighScores() {
        var highScoreArray = [];
        $.ajax({
            url: "../php/score_server.php",
            data: {
                "action": "getScore"
            },

            type: 'GET',
            success: function (result) {

                var resultParsed = JSON.parse(result);
                $.each(resultParsed, function (key, value) {
                    hs.push(value);
                });
                ko.applyBindings(new initCanvas());
                $('#controls').find('input, select, button').prop('disabled', false);

            },

            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            async: true
        });
    }

Answer 1

当您创建 View 模型 (initCanvas) 时，数组 hs 为空，因为它尚未等待 ajax 调用完成。当您成功回调 $.ajax 时，您应该ko.applybindings。这样，您实际上就在 hs 中拥有了用于 knockout 绑定(bind)的数据:

            success: function (result) {
                var resultParsed = JSON.parse(result);
                $.each(resultParsed, function (key, value) {
                    hs.push(value);
                });
                ko.applyBindings(new initCanvas());

            }