【Spark Framework】REST API + knockout.jsを使って データバインドする

Java/Webフレームワーク

■ はじめに

https://blogs.yahoo.co.jp/dk521123/37203509.html
で、REST API を作成できたので、ユーザに表示できるように
knockout.js を使って、データバインドしてみる

なお、knockout.js については、以下の関連記事を参照のこと。
knockout.js
https://blogs.yahoo.co.jp/dk521123/35664953.html
https://blogs.yahoo.co.jp/dk521123/35665471.html
https://blogs.yahoo.co.jp/dk521123/35679484.html

■ 前提条件

https://blogs.yahoo.co.jp/dk521123/37204914.html
https://blogs.yahoo.co.jp/dk521123/37203509.html
https://blogs.yahoo.co.jp/dk521123/37208237.html
のように設定されていること

■ サンプル

 * 「index.html」の格納場所は、以下の関連記事を参照のこと。
https://blogs.yahoo.co.jp/dk521123/37208237.html

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World</title>
<script type="text/javascript"
  src="">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<script type='text/javascript'
  src='https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js'>
</head>
<body>
  <h1>Hello World!</h1>
  <ul data-bind="foreach: people">
    <li>ID: <span data-bind="text: id"></span>, 名前: <span
      data-bind="text: name"></span></li>
  </ul>
  <script type="text/javascript">
      var viewModel = {
        people : ko.observableArray()
      };
      ko.applyBindings(viewModel);
      $(document).ready(function() {
        $.getJSON("/hello", function(data) {
          viewModel.people(data);
        });
      });
    </script>
</body>
</html>

DemoService.java

package com.sample.spark;

import com.google.gson.Gson;
import com.sample.spark.controllers.HelloWorldController;

import spark.Service;

public class DemoService {
  public static void main(String[] args) {
    DemoService sparkService = new DemoService();
    sparkService.initialize();
  }

  private Service service;

  private DemoService(ServiceConfig config) {
    this.service = Service.ignite();
  }

  public void initialize() {
    this.service.staticFiles.location("/public");
    
    Gson gson = new Gson();
    HelloWorldController controller = new HelloWorldController();

    this.service.get("/hello", controller::getPeople, gson::toJson);
    this.service.get("/stop", (request, response) -> {
      // Server stop!
      this.service.stop();
      return null;
    });
  }
}

HelloWorldController.java

package com.sample.spark.controllers;

import java.util.ArrayList;
import java.util.List;

import com.sample.spark.models.Person;

import spark.Request;
import spark.Response;

public class HelloWorldController {
  public List<Person> getPeople(Request request, Response response) {
    List<Person> people = new ArrayList<>();
    people.add(new Person(1L, "Mike"));
    people.add(new Person(2L, "Tom"));
    people.add(new Person(3L, "Kevin"));
    return people;
  }
}

Person.java

package com.sample.spark.models;

public class Person {
  private long id;
  private String name;
  
  public Person(long id, String name) {
    this.id = id;
    this.name = name;
  }
  
  public long getId() {
    return this.id;
  }
  public void setId(long id) {
    this.id = id;
  }
  public String getName() {
    return this.name;
  }
  public void setName(String name) {
    this.name = name;
  }
}

出力結果

ブラウザを立ち上げて、以下のURLにアクセスする
[[http://localhost:4567]]
Hello World!

ID: 1, 名前: Mike
ID: 2, 名前: Tom
ID: 3, 名前: Kevin

参考文献

http://den2sn.hatenablog.com/entry/2013/03/30/014809

関連記事

Spark Framework

初期設定 ～ 環境構築(Gradle Project)からHello Worldまで / 新版 ～
https://blogs.yahoo.co.jp/dk521123/37204914.html
Spark Framework + GSONを使って REST API を作成する
https://blogs.yahoo.co.jp/dk521123/37203509.html
静的ファイルを設定するには...
https://blogs.yahoo.co.jp/dk521123/37208237.html
Ajax で form データ送受信する
https://blogs.yahoo.co.jp/dk521123/37210328.html

knockout.js

knockout.js ～入門編～
https://blogs.yahoo.co.jp/dk521123/35664953.html
knockout.js ～基礎編～ [1]
https://blogs.yahoo.co.jp/dk521123/35665471.html
knockout.js ～構文編～
https://blogs.yahoo.co.jp/dk521123/35679484.html
ASP.NET MVC で、 knockout.js を使う ～入門編～
https://blogs.yahoo.co.jp/dk521123/35660898.html