我发现了关于我在这里遇到的问题的类似问题,但没有一个能解决我的问题。
加载页面时,我使用 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
});
}
最佳答案
当您创建 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());
}
关于javascript - 我的对象填充可观察数组中的信息不会显示在我的 View 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29281161/