一周前我刚开始使用 knockout.js，所以希望这很容易。我花了大约 5 个小时搜索 Google 和这个网站，但我看到的所有建议似乎都不起作用。我尝试将 pagedPlayerList 更改为仅 playerList 以删除该部分代码作为问题。
我有这段代码显示了一些带有 knockout.js 的数据
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Attack</th>
<th>Defense</th>
<th>Level</th>
<th>IPH</th>
<th>Syndicate</th>
<th>Last Modified</th>
<th style="width: 100px; text-align:right;" />
</tr>
</thead>
<tbody data-bind=" template:{name:playerTemplateToUse, foreach: pagedPlayerList }"></tbody>
</table>
<ul class="pagination">
<li data-bind="css: { disabled: pageIndex() === 0 }"><a href="#" data-bind="click: previousPage">«</a></li>
</ul>
<ul class="pagination" data-bind="foreach: allPlayerPages">
<li data-bind="css: { active: $data.pageNumber === ($root.pageIndex() + 1) }"><a href="#" data-bind="text: $data.pageNumber, click: function() { $root.moveToPage($data.pageNumber-1); }"></a></li>
</ul>
<ul class="pagination">
<li data-bind="css: { disabled: pageIndex() === maxPlayerPageIndex() }"><a href="#" data-bind="click: nextPlayerPage">»</a></li>
</ul>
<script id="itemsPlayerTmpl" type="text/html">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: att"></td>
<td data-bind="text: def"></td>
<td data-bind="text: lvl"></td>
<td data-bind="text: iph"></td>
<td data-bind="text: synd_name"></td>
<td data-bind="text: $root.lastModDate(last_modified)"></td>
<td class="buttons">
<a class="btn btn-sm btn-primary" data-bind="click: $root.edit" href="#" title="edit"><i class="glyphicon glyphicon-edit"></i></a>
<a class="btn btn-sm btn-primary" data-bind="click: $root.removePlayer" href="#" title="remove"><i class="glyphicon glyphicon-remove"></i></a>
</td>
</tr>
</script>
<script id="editPlayerTmpl" type="text/html">
<tr>
<td data-bind="text: id"></td>
<td><input data-bind="value: name"/></td>
<td><input size="8" data-bind="value: att"/></td>
<td><input size="8" data-bind="value: def"/></td>
<td><input size="3" data-bind="value: lvl"/></td>
<td><input size="8" data-bind="value: iph"/></td>
<td>
<select data-bind="options: $root.syndList, optionsText: 'name', optionsValue: 'id', value: synd_id, selectedOptions: 'synd_id', optionsCaption: 'Please select...'"></select>
</td>
<td data-bind="text: $root.lastModDate(last_modified)"></td>
<td class="buttons">
<a class="btn btn-sm btn-success" data-bind="click: $root.savePlayer" href="#" title="save"><i class="glyphicon glyphicon-ok"></i></a>
<a class="btn btn-sm btn-primary" data-bind="click: $root.cancel" href="#" title="cancel"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</script>
加载页面时它可以完美运行。问题是，我想让数据每 2 分钟自动更新一次，并且当我加载显示中的数据时不会更新。
这是javascript的相关部分
self.playerList = ko.observableArray();
<?php if(isset($playerlist)) { ?>
self.playerList(jQuery.parseJSON('<?php echo addslashes($playerlist); ?>'));
<?php } ?>
self.lastModDate = function(data){
var myDate = new Date(data * 1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var month = months[myDate.getMonth()];
var date = myDate.getDate();
var year = myDate.getFullYear();
var time = date+', '+month+' '+year;
return time;
}
// ALL PLAYERS TAB
self.addPlayer = function () {
var newItem = new Player();
self.playerList.push(newItem);
self.selectedItem(newItem);
self.moveToPage(self.maxPlayerPageIndex());
};
self.removePlayer = function (item) {
if (item.id) {
if (confirm('Are you sure you wish to delete this item?')) {
$.post('<?php echo base_url('front/deleteplayer'); ?>', item).complete(function (result) {
if(result = '1'){
toastr.success("The player has been removed.", "");
self.playerList.remove(item);
if (self.pageIndex() > self.maxPlayerPageIndex()) {
self.moveToPage(self.maxPlayerPageIndex());
}
} else {
toastr.error("There was a problem removing the player", "");
}
});
}
}
else {
self.list.remove(item);
if (self.pageIndex() > self.maxPlayerPageIndex()) {
self.moveToPage(self.maxPlayerPageIndex());
}
}
};
self.savePlayer = function () {
var item = self.selectedItem();
$.post('<?php echo base_url('front/saveplayer'); ?>', item, function (result) {
console.log(item);
toastr.success("Your changes have been saved.", "");
self.selectedItem(null);
});
};
self.pagedPlayerList = ko.dependentObservable(function () {
var size = self.pageSize();
var start = self.pageIndex() * size;
return self.playerList().slice(start, start + size);
});
self.maxPlayerPageIndex = ko.dependentObservable(function (list) {
return Math.ceil(self.playerList().length / self.pageSize()) - 1;
});
self.nextPlayerPage = function () {
if (self.pageIndex() < self.maxPlayerPageIndex()) {
self.pageIndex(self.pageIndex() + 1);
}
};
self.allPlayerPages = ko.dependentObservable(function () {
var pages = [];
for (i = 0; i <= self.maxPlayerPageIndex() ; i++) {
pages.push({ pageNumber: (i + 1) });
}
return pages;
});
self.playerTemplateToUse = function (item) {
return self.selectedItem() === item ? 'editPlayerTmpl' : 'itemsPlayerTmpl';
};
// END ALL PLAYERS TAB
self.edit = function (item) {
self.selectedItem(item);
self.currentSynd(item.synd_id);
};
self.cancel = function () {
self.selectedItem(null);
};
self.previousPage = function () {
if (self.pageIndex() > 0) {
self.pageIndex(self.pageIndex() - 1);
}
};
self.moveToPage = function (index) {
self.pageIndex(index);
};
然后这是绑定/更新代码
// SELF UPDATING DATA
update = function() {
siteModel.updatePlayerList();
console.log(siteModel.playerList);
}
var siteModel = new siteModel();
window.setInterval(update,60000);
ko.applyBindings(siteModel);
这是 updatePlayerList 函数
self.updatePlayerList = function(){
$.ajax({
url:'<?php echo base_url('front/listplayers'); ?>',
success:function(data) {
var obj = jQuery.parseJSON(data);
self.playerList = (obj);
}
});
}
updatePlayerList 第一次触发这是服务器返回内容的摘录：
[{"id":"19","name":"AlDavisJR","att":"818741","def":"895287","lvl":"227","iph":"2804866","synd_id":"9","last_modified":"1384284327","synd_name":"FIGHT CLUB"},{"id":"15","name":"aLEX","att":"95748","def":"112386","lvl":"227","iph":"16033","synd_id":"15","last_modified":"1384240593","synd_name":"iron"}]
但是 console.log(self.playerList); 显示一个空白值。它运行 console.log 的第二次和任何后续时间都会显示正确的数据。
问题是表格总是显示页面首次加载时加载的数据。如果我修改数据库，ajax 调用会取回新数据，但不会上传网站。