Knockout.js从mysql数据库更新值

Let's assume that I have 3 computers that write to a mysql database based on whether they are online or offline every 5 minutes.

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

I display this information on a website in a simple html table and read the mysql database with php.

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

The output goes something like this:

输出如下:

<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>

The php code is really easy and is just returning a select * from db then iterating through the array.

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

My question is simply, how do I incorporate knockout to reload the results from the DB every 5 minutes to refresh the items on the page.

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

1 个解决方案

#1

CodePen Demo

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

Create a view model with an observable array. Then make a refresh method that pulls data, and overrides the observable. Because all items in the array are dependant on the root array, there's no need for them to be observable.

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

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

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

    });
  }

Refresh once, and then again at the desired interval, e.g., 5 minutes.

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

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

ko.applyBindings(app = new ViewModel);

---

jQuery provides very easy AJAX methods, such as $.getJSON.

jQuery提供了非常简单的AJAX方法,例如$ .getJSON。

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

---

Also, there's a plugin called Live, which syncs data in real time between multiple clients. However it depends on NodeJS, so it may not be a good solution to you (mostly posting it here for future-googlers.

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