さっしーブログ

埼玉県在住のシステムエンジニアです。基本的には技術的な内容を中心に発信していきます。

Xampp + PHP + knockout.jsでデータバインディングを試してみた。

目次

1.環境

・windows7 32bit
xampp( php 5.2.0 + apache 2.4 )
jQuery 3.2.1
knockout.js 3.4.2
 

2.前提条件

・xamppインストール済み
・xampp設定済み( php と apache が使用できること
 

3.概要

入力ボックスにテキストを入力して、「実行」ボタンを押下すると「Hello!!! ○○○」という文字列を画面上に表示するサンプルプログラムです。
内部の流れとしては、PHPで作成したWebAPIにAjaxでリクエストを投げて、受け取ったJSONのレスポンスをknockout.jsで定義したViewModelに設定します。
このViewModelに値を設定するだけで定義したとおりにknockout.jsが自動でレンダリングしてくれます。
この仕組を利用することで、ViewとLogicを分離させることが可能です。
 

4.内部構成

/project
      |---/index.html
     │
      |---/api
      |       |---/sample.php
     │
      |---/js
            |---/knockout-3.4.2.js
            |---/sample.js
 
 

5.ソースコード

以下にサンプルのソースコードを掲載します。
 

5-1.index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- JQuery CDN : https://code.jquery.com/ -->
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="./js/knockout-3.4.2.js"></script>
<script src="./js/sample.js"></script>
</head>
<body>
<h1 data-bind="text: message"></h1>
<input id="field_name" type="text" value="">
<button id="exec_button">実行</button>
</body>
</html>
 

5-2.sample.php

<?php
 
//以下のURLでアクセス
 
parse_str($_SERVER['QUERY_STRING'], $query_string_arry);
 
$name = $query_string_arry["name"];
 
$response = array(
     'code' => '200',
     'message' => 'OK!',
     'name' => $name
);
 
echo json_encode($response);
 
?>
 

5-3.sample.js

$(function() {
 
     function UserNameModel() {
 
     var self = this;
 
     self.name = ko.observable("");
 
     self.message = ko.observable("");
 
     self.exec = function() {
 
          console.log("クリックされました");
 
          var name = self.name();
 
$.ajax({
     'type' : 'GET',
     'url' : 'api/sample.php',
     'dataType' : 'json',
     'data' : {
     'name' : name
},
'success' : function(data) {
 
     console.log("code : " + data["code"]);
     console.log("message : " + data["message"]);
     console.log("name : " + data["name"]);
 
     message = "Hello!!! " + data["name"];
     self.message(message);
},
'error' : function(XMLHttpRequest, textStatus, errorThrown) {
 
     console.log("エラーが発生しました。");
 
}});
}
};
 
$(document).ready(function() {
 
     ko.applyBindings(new UserNameModel());
 
});
 
})
 
以上