knockout.jsでJSONで通信する #JavaScript

iOSとかでアプリ内でシリアル入力とかさせると違反になるおそれがあるので外部で入力させるようにするために作ったモックみたいなものを作ったのでそのサンプル。

knockout.jsを使用した理由は、社内コードを見たら使っていたのでっていうなんとなくの理由。

HTMLサンプル

index.html

<!doctype html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    <script type="text/javascript">
      $(function() {
        function Campaign(data) {
          var self = this;

          self.ID = ko.observable(data.id);
          self.Name = ko.observable(data.name);
          self.UserID = ko.observable("");
          self.Code = ko.observable("");

          self.Save = function() {
            var data = {
              "id": self.ID(),
              "user_id": self.UserID(),
              "code": self.Code()
            };
            $.post("http://localhost:4567/", data, function(data) {
              console.log(data);      
            });
          }
        }

        function CampaignViewModel() {
          var self = this;

          self.Campaigns = ko.observableArray([]);

          $.getJSON("http://localhost:4567/", function(data) {
            var campaigns = $.map(data, function(item) { return new Campaign(item); });
            self.Campaigns(campaigns);
          });
        }

        ko.applyBindings(new CampaignViewModel());
      });
    </script>
  </head>
  <body>
    <div data-bind="foreach: Campaigns">
      <form method="post">
        <input type="hidden" data-bind="value: ID" />
        <label data-bind="value: Name"></label><br />
        <label>User ID</label><br />
        <input type="text" data-bind="value: UserID" /><br />
        <label>Code</label><br />
        <input type="text" data-bind="value: Code" /><br />
        <button data-bind="click: Save">Save</button>
      </form>
    </div>
  </body>
</html>

サーバコードサンプル

app.rb

require 'sinatra'
require 'json'


def get '/' do
  campaigns = [
    {
      id: 1,
      name: 'campaign 1',
    },
    {
      id: 2,
      name: 'campaign 2',
    },
  ]

  campaigns.to_json
end

def post '/' do
  {success: true}. to_json
end