【knockout.js】 knockout.js ～入門編～

knockout.js

  Knockout（ノックアウト）とは？

 * Model-View-ViewModel（MVVM）パターンをサポートするライブラリ

  何ができる?

 * 双方向バインディング

 

  環境構築

[1] 以下のサイトからJSをダウンロードする
 or
    CDN(Content Delivery Networks)用のURL(http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js)をコピーする
http://knockoutjs.com/downloads/index.html
[2] コンテンツをインポートする

<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'>

 

  サンプル

  例1：Hello World! その1

<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'>
</head>
<body>
<div data-bind="text: message"></div>
<script>
window.onload = function() {
    var viewModel = {message: 'Hello World!'};
    ko.applyBindings(viewModel);
};
</script>
</body>
</html>

  出力結果

Hello World!

  例2：Hello World! その2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'>
</head>
<body>
<input data-bind="value: message, valueUpdate: 'afterkeydown'" />
<div data-bind="text: message"></div>
<script>
$(function() {
    function DemoViewModel(){
       var self = this;
       
       self.message = ko.observable('Hello!');
    }
    ko.applyBindings(new DemoViewModel());
});
</script>
</body>
</html>

 

続きは以下の関連記事
http://blogs.yahoo.co.jp/dk521123/35665471.html

 

  参考文献

参考になる
http://ameblo.jp/ca-1pixel/entry-11298459074.html
http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_03.html
http://www.buildinsider.net/web/bookjslib111/89
http://qiita.com/opengl-8080/items/2b0fb26be865bd5d1890
http://analogic.jp/knockoutjs-summary/
デモ・サンプル
http://kojs.sukobuto.com/tips/helloWorld
http://tips.recatnap.info/wiki/Knockout.js%E3%81%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

 

  関連記事

  ASP.NET MVC で、 knockout.js を使う ～入門編～

http://blogs.yahoo.co.jp/dk521123/35660898.html

  UIアーキテクチャ・パターン（MVVM / MVPVM）

http://blogs.yahoo.co.jp/dk521123/22001152.html

  knockout.js ～構文編～

http://blogs.yahoo.co.jp/dk521123/35679484.html

  knockout.js ～基礎編～

http://blogs.yahoo.co.jp/dk521123/35665471.html

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

https://blogs.yahoo.co.jp/dk521123/37208334.html