目次
1.環境
・windows7 32bit
・ jQuery 3.2.1
・ knockout.js 3.4.2
2.前提条件
・xamppインストール済み
3.概要
入力ボックスにテキストを入力して、「実行」ボタンを押下すると「Hello!!! ○○○」という文字列を画面上に表示するサンプルプログラムです。
この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" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
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',
'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());
});
})
以上
