Components を使ってみる - 418

これはKnockoutJSアドベントカレンダー３日目の記事です。

<a href="http://qiita.com/advent-calendar/2014/knockoutjs">KnockoutJS Advent Calendar 2014 - Qiita</a>
KnockoutJS Advent Calendar 2014 - Qiita

KnockoutJS 3.2では新しく Components という機能が追加されました。

作者のブログにもあるようにこの機能は web components に強く影響された機能で、コンポーネント単位で非同期にページをレンダリングします。

Componentsを使うとどのように書くことができるのか見てみましょう。
まず普通のKnockoutで書いたサンプルです。

<html lang="ja">
<html>
  <head>
    <title> Component Examples</title>
    <script src="knockout-3.2.0.js"></script>
  </head>
  <body>
    
    <p>Enter your name: <input data-bind='value: name'/></p>
    <p>You entered <strong data-bind='text: name().toUpperCase()'></strong></p>
    
    <script>
      var viewModel = {
        name: ko.observable('something')
      };
      ko.applyBindings(viewModel);
    </script>
  </body>
</html>

デモはこちら。

このデモを全く同じ動作のまま Components を使って書くと以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title> Component Example </title>
    <script src="js/knockout-3.2.0.js"></script>
  </head>
  <body>
  	<name-editor></name-editor>
    <script>
    	ko.components.register('name-editor', {
    		template: "<p>Enter your name: <input data-bind='value: name'/></p><p>You entered <strong data-bind='text: name().toUpperCase()'></strong></p>",
    		viewModel: function() {
    			this.name = ko.observable('something');
    		}
    	});
    	ko.applyBindings();
    </script>
  </body>
</html>

このデモはこちら。

まったく同じ動作ですが、ko.components.register を使い "name-editor" という名前のComponentを登録しています。
これによりコンポーネントの再利用することが可能になります。

またコンポーネントは作成するときに以下のようにパラメータを渡してやることができます。
KnockoutJSのComponentsでは "component"バインディングも用意されており、他のバインディングと同じように data-bind でコンポーネントを指定することもできます。

デモはこちら。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title> Component Example </title>
    <script src="js/knockout-3.2.0.js"></script>
  </head>
  <body>
    <name-editor params="value: 'hello world'"></name-editor>
    <div data-bind="component: { name: 'name-editor', params: { value: 'hoge bar' } }"></div>

    <script>
    	ko.components.register('name-editor', {
    		template: "<p>Enter your name: <input data-bind='value: name'/></p><p>You entered <strong data-bind='text: name().toUpperCase()'></strong></p>",
    		viewModel: function(params) {
    			this.name = ko.observable(params.value);
    		}
    	});
    	ko.applyBindings();
    </script>
  </body>
</html>

いかがでしたでしょうか。
ざっと軽く見ただけでも便利なのが分かってもらえるかと思います。

さらに、KnockoutJSはこの機能もIE6のような古いブラウザーでも動くように実装しているらしいですが未検証です。

明日は @sukobuto さんの「THETA BINDING」です！よろしくお願いします！