Question

假设我有3台计算机根据它们是否每5分钟在线或离线写入一个mysql数据库。

我在一个简单的html表格中的网站上显示这些信息，并用php读取mysql数据库。

输出如下：

<table>
    <th>Computer portfolio</th>
    <tr>
        <td>Computer Name</td>
        <td>Status</td>
        <td>Last Connected</td>
    </tr>
    <tr>
        <td>Computer 1</td>
        <td>Okay</td>
        <td>2013-07-10 00:15:25</td>
    </tr>
    <tr>
        <td>Computer 2</td>
        <td>Down</td>
        <td>2013-07-08 00:15:25</td>
    </tr>
    <tr>
        <td>Computer 3</td>
        <td>Okay</td>
        <td>2013-07-10 00:17:25</td>
    </tr>
</table>

php代码非常简单，只是从db返回select *然后遍历数组。

我的问题很简单，我如何整合knockout来每隔5分钟从数据库重新加载结果来刷新页面上的项目。

Answer 1

CodePen Demo

function getJSON(callback) {
    // Get an array from the server
    // callback(data)
}

使用可观察数组创建视图模型。然后创建一个刷新数据的刷新方法，并覆盖observable。因为数组中的所有项都依赖于根数组，所以不需要它们是可观察的。

function ViewModel(){
  var self = this;
  self.items = ko.observableArray([]);

  self.refresh = function(){
    getJSON(function(data){
      self.items(data);
      console.log(data);

    });
  }

刷新一次，然后以所需的间隔再次刷新，例如5分钟。

  self.refresh();
  setTimeout(self.refresh, 5 * 60 * 1000);
}

ko.applyBindings(app = new ViewModel);

jQuery提供very easy AJAX methods，例如$.getJSON。

function getJSON(callback) {
    $.getJSON('tabledata.php', callback);
}

此外，还有一个名为Live的插件，它可以在多个客户端之间实时同步数据。然而，这取决于NodeJS，所以它可能不是一个很好的解决方案（大多数是在这里发布给未来的googlers。

Knockout.js从mysql数据库更新值

1 个答案:

CodePen Demo