Knockout.jsはじめの一歩【jQueryのDOM操作を部分的にKnockout.jsに置き換える】

Knockout.jsがすこぶる便利だったので、ご紹介したいと思います。

jQueryの場合

こんなHTMLがあります。

<div>
  <div id="name">東京太郎</div>
  <div id="tel">03-3333-4444</div>
  <div id="address">東京都千代田区1-1-1</div>
</div>

jQueryを使ってAjax通信で取得したデータを使って書き換えます。

  $(document).ready(function(){
  	$.getJSON("http://xxxx/yyyy",function(json){
  		$("#name").text("").text(json.name);
  		$("#tel").text("").text(json.tel);
  		$("#address").text("").text(json.address);
  	});
  });

問題点はidやclassを指定しなければいけないところ。
デザイナーさんに渡した際に、idに連番を付けられたり別のものに変更されたりすると、いっぺんに動かなくなります。

一部をKnockout.jsに書き換える。

HTMLはこんな感じに変更

<!--追加でknockout.jsをCDNから読み込み-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

<div>
  <div data-bind="text: name">東京太郎</div>
  <div data-bind="text: tel">03-3333-4444</div>
  <div data-bind="text: address">東京都千代田区1-1-1</div>
</div>

data-bindという独自の属性を使うことによって、IDやclassから切り離すことができます。

knockout.jsではdata-bindとJavascriptを繋ぐviewModelというものを書きます。
そして、そのviewModel内のオブジェクトに変更をかけることで、DOM操作を実現することができます。

$(document).ready(function(){

    // この部分がHTMLとJavascriptを繋ぐviewModelという部分。
	var viewModel = {
        name: ko.observable(),
        tel: ko.observable(),
        address: ko.observable()
    };
 
 	// おまじない
	ko.applyBindings(viewModel);  
	
	// jQueryを使って取得したデータを代入する部分が下記
	$.getJSON("http://xxxx/yyyy",function(json){
        viewModel.name(json.name);
        viewModel.tel(json.tel);
        viewModel.address(json.address);
    });
});      

DOMが読み込まれたあとに動くように記述します。
これで、DOM操作をidやclassと切り離すことができました。