Knockout.js update values from mysql database

Question

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.

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

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.

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.

• Andrew Walters: First, re-write your table using knockout observables. Second, call a services every 5 minutes to get the new data & refresh the observables
• A_Elric: @AndrewWalters Can you give me an example of how this might work?

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

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.

 self.refresh();
 setTimeout(self.refresh, 5 * 60 * 1000);
}
ko.applyBindings(app = new ViewModel);

---

jQuery provides very easy AJAX methods, such as $.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.

• A_Elric: Well, I have this only partially written. I'd love some suggestions on background reading or other similar projects that I could look at.
• Brigand: I gave a jQuery example. It's probably a bit extreme to pull the enter jQuery library into your app for that, but it depends on your performance needs (usually a half a second longer to load). You can find other methods by searching "get ajax json without jQuery".