I recently had a project that made me temporarily shift from my more native c#/asp.net environment and use php on the backend instead. As by more and more asp.net developers these days I have become accustomed to doing just about everything in the front end with the JavaScript library Knockout. Of course knockout.js is completely compatible with php being that it is on the front end while php is on the back end, but in combining php with knockout there are a few things that I have found make the match just a bit smoother.


Passing Data from PHP to Knockout

The built in php function json_encode is ideal for passing any object to knockout becuase it can be stored directly in a javascript variable. Then the ko.mappingplugin may be used to build a view model or individual properties can be extracted from the variable. For example lets say we have a php associative array called $data. And $data[“email”] is a list of emails. So if we send json_encode($data) to our knockout view model, it can be accessed by first storing it in a javascript variable called data:

var data = <?php echo json_encode($data); ?> ;

And just for your information, if you need to create an array from a MySQL query you can do it as follows:

$result = mysqli_query($con, $query);
$my_array = array();
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    $my_array[] = $row;
}	
$data = $my_array;

And then simply passed into out view model:
function ViewModel (data){
    self = this;
	self.User = {
            ko.observable(data.email),
            ...
        }
}

Its that easy. Or if you wanted to use the ko.mapping plugin:

function ViewModel (data){
    self = this;
	self.User = ko.mapping.fromJS(data);
}


Passing Data from Knockout to PHP


The easiest way I found to pass data from Knockout back to PHP was with the knockout built-in function ko.toJS().  For example lets say I have a view model:

function ViewModel (){
    self = this;
    self.User = {
        Email:ko.observable(),
    FirstName : ko.observable(),
	LastName : ko.observable(),
};

And I wan’t to pass the user variable to php. I can just use ko.toJS() to store the user in a javascript variable :

var data = ko.toJS({"data":self.User});

and then use AJAX to pass it to the back end:

$.ajax({
    url: "CreateUser.php",
    type: 'post',
    data: data    
});

Since I am using “post”, in php I accept the data as follows:

$data = $_POST['data'];

And then I extract each field as follows:

$email = $data['Email'];
$firstName = $data['FirstName'];
$lastName = $data['LastName'];

  • Luba Karpenko

    Your article helped a lot!!! Thank you!

    • btrager

      Glad to hear. Thanks for reading.

  • rohit

    hii
    how can i insert data in mysql using knockout?

    • danconiaus

      Into your database? You’ll most likely want to pass the variable from Javascript to PHP and *then* use PHP to validate / filter and do a MySQL INSERT query.

  • danconiaus

    Excellent article for those of us curious at how PHP talks to Knockout.js. For future reference though your paragraph font on this website is *really* hard to read. Might want to at least try a higher font-weight or different font.

    I know. Everyone’s a critic!

  • Dashmeet Singh

    Great article. It helped a lot.
    Just one suggestion: Please switch to better fonts.
    Nice read though.

    • danconiaus

      Seriously, at the least increase the font weight a bit. The letters are almost indiscernible.

  • Ankit Shah

    Tutorial is Excellent. Please change the Site Font. Not able to read clearly.