knockout.js チュートリアルをやってみた【Loading and saving data】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../../lib/knockout-3.2.0.js"></script>
<script type="text/javascript" src="sample.js" defer="defer"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<h3>Tasks</h3>
<form data-bind="submit: addTask">
  タスク追加: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
  <button type="submit">追加する</button>
</form>
<ul data-bind="foreach: tasks, visible: tasks().length > 0">
  <li>
  <input type="checkbox" data-bind="checked: isDone" />
  <input data-bind="value: title, disable: isDone" />
  <a href="#" data-bind="click: $parent.removeTask">Delete</a>
  </li>
</ul>
現在 <b data-bind="text: incompleteTasks().length">&nbsp;</b> タスク
<span data-bind="visible: incompleteTasks().length == 0"> - さて、一息入れましょう!!</span>
</body>
</html>

sample.js

function Task(data) {
  this.title = ko.observable(data.title);
  this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
  var self = this;
  self.tasks = ko.observableArray([]);
  self.newTaskText = ko.observable();
  self.incompleteTasks = ko.computed(function() {
    return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
  });

  // Operations
  self.addTask = function() {
    self.tasks.push(new Task({ title: this.newTaskText() }));
    self.newTaskText("");
  };
  self.removeTask = function(task) { self.tasks.remove(task) };

  $.getJSON("tasks.json", function(allData){
    var mappedTasks = $.map(allData, function(item){
      return new Task(item);
    });
    self.tasks(mappedTasks);
  });
}

ko.applyBindings(new TaskListViewModel());

tasks.json

{
  "1":{
     "title":"test1",
     "isDone":true
  },
  "2":{
    "title":"test2",
    "isDone":true
  },
  "3":{
    "title":"test3",
    "isDone":false
  },
  "4":{
    "title":"test4",
    "isDone":false
  },
  "5":{
    "title":"test5",
    "isDone":false
  }
}

Step3

タスクリストのサンプルプログラム（フォームでのデータ送信版）

サンプルコード

ko.toJSON()でモデルデータをJSONに変換することができる。 ※本サンプルコードは実際に送信はできないためご了承ください。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../../lib/knockout-3.2.0.js"></script>
    <script type="text/javascript" src="sample.js" defer="defer"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title></title>
  </head>
  <body>
    <h3>Tasks</h3>
    <form data-bind="submit: addTask">
      タスク追加: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
      <button type="submit">追加する</button>
    </form>
    <ul data-bind="foreach: tasks, visible: tasks().length > 0">
      <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeTask">Delete</a>
      </li>
    </ul>

    現在 <b data-bind="text: incompleteTasks().length">&nbsp;</b> タスク
    <span data-bind="visible: incompleteTasks().length == 0"> - さて、一息入れましょう!!</span>

    <form action="/tasks/saveform" method="post">
      <textarea type="hidden" name="tasks" data-bind="value: ko.toJSON(tasks)"></textarea>
      <button type="submit">Save</button>
    </form>
  </body>
</html>

sample.js

function Task(data) {
  this.title = ko.observable(data.title);
  this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
  // Data
  var self = this;
  self.tasks = ko.observableArray([]);
  self.newTaskText = ko.observable();
  self.incompleteTasks = ko.computed(function() {
    return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
  });

  // Operations
  self.addTask = function() {
  self.tasks.push(new Task({ title: this.newTaskText() }));
  self.newTaskText("");
  };
  self.removeTask = function(task) { self.tasks.remove(task) };

  $.getJSON("tasks.json", function(allData){
    var mappedTasks = $.map(allData, function(item){
      return new Task(item);
    });
    self.tasks(mappedTasks);
  });
}

ko.applyBindings(new TaskListViewModel());

tasks.json

{
  "1":{
    "title":"test1",
    "isDone":true
  },
  "2":{
    "title":"test2",
    "isDone":true
  },
  "3":{
    "title":"test3",
    "isDone":false
  },
  "4":{
    "title":"test4",
    "isDone":false
  },
  "5":{
    "title":"test5",
    "isDone":false
  }
}

Step4

タスクリストのサンプルプログラム（ajaxでのデータ送信版）

サンプルコード

タグを使用せず、

当ブログに掲載されている広告について

当サイトでは、Google のアクセス解析サービス（Google アナリティクス）と Google の広告配信サービス、Amazonアソシエイト（第三者配信の広告サービス）を使用しています。

これらのサービスは Cookie を使用しておりますが、収集される情報は匿名化されており、当サイトの管理者が個人を特定することはできません。

詳細につきましては、下記をご覧ください。

当サイトは、Amazonアソシエイト（第三者配信の広告サービス）を使用しています。

このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報『Cookie』(氏名、住所、メールアドレス、電話番号は含まれません) を使用することがあります。

当サイトは、利用ユーザー数やアクセス回数等の統計データを収集することを目的として Google アナリティクスを使用しています。

Google アナリティクスは Cookie を使用しています。

Google アナリティクスの広告向けの機能によって、Google 広告 Cookie と匿名 ID を使ったトラフィックデータが収集されます。

統計データの収集を望まれない場合には Google アナリティクスオプトアウトアドオンを使用することで、Google アナリティクス JavaScript（ga.js、analytics.js、dc.js）によるデータの使用を無効にすることができます。

当サイトは、Google の広告配信サービス（Google のパートナーの第三者配信事業者による広告配信を含みます。）を使用しています。

それにより、Google 及び第三者配信事業者や広告ネットワークの配信する広告が当サイトに掲載されます。

Google を含む第三者配信事業者は Cookie を使用して、当ウェブサイトへの過去のアクセス情報に基づいて広告を配信します。

DoubleClick Cookie を使用することにより、Google や Google のパートナーは当サイトや他のサイトへのアクセス情報に基づいて、適切な広告をユーザーに表示できます。

ユーザーは広告設定で、インタレストベースでの広告掲載に使用される DoubleClick Cookie を無効にできます

その他、Googleの広告におけるCookieの取り扱い詳細については、Googleのポリシーと規約ページをご覧ください。

当ブログへのコメントについて

メールアドレスとURLの入力に関しては、任意となっております。

全てのコメントは管理人であるy_saikiが事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。

次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。

特定の自然人または法人を誹謗し、中傷するもの。
極度にわいせつな内容を含むもの。
禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。

初出掲載：2017年4月28日

更新日　：2017年9月14日

Sassyブログ

埼玉県在住のシステムエンジニアです。基本的にはIT技術関連の内容を中心に発信していきます。たまにゲーム関連ネタも載せます

knockout.js チュートリアルをやってみた【Loading and saving data】

目次

Step2

サンプルコード

Step3

サンプルコード

Step4

サンプルコード

Step5

サンプルコード