HTML KnockoutJS data-bind7 Original Component

2023-12-042023
92.4% (337.6/365)
December
11.6% (3.6/31)
Week 49
8.6% (0.6/7)
Day 04 Mon
60.4% (14.4/24)

訪問者

total: 7494
today: 3
yesterday: 4
now: 10

↑

更新

MenuBar

これは何?
サンプルアプリケーション
ソースコード
コンポーネントのDOM要素を取得したい場合

cf. knockout.js

これは何? †

ひとまとまりの HTML をコンポーネント化する

body からは

<div data-bind="component: {name : 'color-slider', params : {r:100, g:128, b:156, setThisComponent:setComponent1}}"></div>

というようにコンポーネント名と引数を指定して呼び出す

params は、コンポーネント view model のコンストラクタの引数になる
```
return function colorModel(params) {
  this.r = ko.observable(params.r);
  this.g = ko.observable(params.g);
  this.b = ko.observable(params.b);
  this.rgb = ko.computed(function() {
    var rgb16 = "#" + HEX[this.r()] + HEX[this.g()] + HEX[this.b()];
    return rgb16;
  }, this);
  params.setThisComponent(this);
};
```
- コンポーネント外部との通信には、(他に良いやり方があるかも知れないけど、自分が試した範囲では、) コンポーネントの view model を画面全体の view model に設定する function を param に設定するのが良さげ

コンポーネント名は、ko.register で登録する

ko.components.register('color-slider', {
  viewModel: colorMdl,
  template: colorView
});

↑

サンプルアプリケーション †

↑

ソースコード †

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutEx9_component.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>knockdown.js Ex9</title>
    <script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx9_init.js"></script>
  </head>
  <body>
    <div data-bind="component: {name : 'color-slider', params : {r:100, g:128, b:156, setThisComponent:setComponent1}}"></div>
    <button data-bind="click: clickBtn">Click</button>
  </body>
</html>

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx9_init.js

/*
 * アプリケーションのイニシャライザ.
 */
require.config({

  // Javascript の Base Url
  baseUrl: 'js/lib',

  // ライブラリのパスの別名を定義する
  paths: {
   'app':      '../',
   'template' : '../../template',
   'knockout' : 'knockout-3.2.0',
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
  }
});

require(['knockout', 'app/knockoutEx9_vmodel', 'template/color', 'text!template/color.html', 'domReady!'],
  function(ko, vmdl, colorMdl, colorView) {
	ko.components.register('color-slider', {
	    viewModel: colorMdl,
	    template: colorView
	});
    ko.applyBindings(new vmdl());
  }
);

text! は、require.js の text plugin。テンプレートなどをテキストとして (Javascript として評価せずに) 読み込む cf. http://requirejs.org/docs/download.html

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx9_vmodel.js

/*
 * アプリケーションの View Model.
 */
define(['knockout'], function(ko) {

	return function appViewModel() {
		var self = this;
		self.setComponent1 = function(component) {
			self.component1 = component;
		}
		self.clickBtn = function() {
			if (self.setComponent1) {
				alert(self.component1.rgb());
			}
		}
	};
});

https://github.com/kagyuu/KnockoutExam/blob/master/template/color.js

define(['knockout'], function(ko) {
  var HEX = [
	  '00','01','02','03','04','05','06','07','08','09','0A','0B','0C','0D','0E','0F',
	  '10','11','12','13','14','15','16','17','18','19','1A','1B','1C','1D','1E','1F',
	  '20','21','22','23','24','25','26','27','28','29','2A','2B','2C','2D','2E','2F',
	  '30','31','32','33','34','35','36','37','38','39','3A','3B','3C','3D','3E','3F',
	  '40','41','42','43','44','45','46','47','48','49','4A','4B','4C','4D','4E','4F',
	  '50','51','52','53','54','55','56','57','58','59','5A','5B','5C','5D','5E','5F',
	  '60','61','62','63','64','65','66','67','68','69','6A','6B','6C','6D','6E','6F',
	  '70','71','72','73','74','75','76','77','78','79','7A','7B','7C','7D','7E','7F',
	  '80','81','82','83','84','85','86','87','88','89','8A','8B','8C','8D','8E','8F',
	  '90','91','92','93','94','95','96','97','98','99','9A','9B','9C','9D','9E','9F',
	  'A0','A1','A2','A3','A4','A5','A6','A7','A8','A9','AA','AB','AC','AD','AE','AF',
	  'B0','B1','B2','B3','B4','B5','B6','B7','B8','B9','BA','BB','BC','BD','BE','BF',
	  'C0','C1','C2','C3','C4','C5','C6','C7','C8','C9','CA','CB','CC','CD','CE','CF',
	  'D0','D1','D2','D3','D4','D5','D6','D7','D8','D9','DA','DB','DC','DD','DE','DF',
	  'E0','E1','E2','E3','E4','E5','E6','E7','E8','E9','EA','EB','EC','ED','EE','EF',
	  'F0','F1','F2','F3','F4','F5','F6','F7','F8','F9','FA','FB','FC','FD','FE','FF'
  ];
  /* この コンポーネント の ViewModel が、
     ko.components.register('color-slider', {
        viewModel: colorMdl,
        template: colorView
     });
     として登録される場合には、 componentInfo は undefined になる。 param しか設定されない。
     このコンポーネントが置かれる DOM 要素を取得したい場合は、ファクトリメソッド経由で、ViewModel のコンストラクタを呼ぶ必要がある
     ko.components.register('color-slider', {
       viewModel: {
         createViewModel: function(params, componentInfo) {
           return new colorMdl(params, componentInfo);
         }
       },
       template: colorView
    });
  */ 
  return function colorModel(params, componentInfo) {
	this.r = ko.observable(params.r);
	this.g = ko.observable(params.g);
	this.b = ko.observable(params.b);
	this.rgb = ko.computed(function() {
		var rgb16 = "#" + HEX[this.r()] + HEX[this.g()] + HEX[this.b()];
		return rgb16;
	}, this);
	params.setThisComponent(this);
  };
});

https://github.com/kagyuu/KnockoutExam/blob/master/template/color.html

<fieldset style="display : inline">
	<legend data-bind="text: rgb, style : {color : rgb}"></legend>
	R: <input type="range" min="0" max="255" data-bind="value: r"/><span data-bind="text: r"></span><br/>
	G: <input type="range" min="0" max="255" data-bind="value: g"/><span data-bind="text: g"></span><br/>
	B: <input type="range" min="0" max="255" data-bind="value: b"/><span data-bind="text: b"></span><br/>
</fieldset>

↑

コンポーネントのDOM要素を取得したい場合 †

一つの画面の中で何個も使われるコンポーネントの場合、コンポーネントに閉じて HTML 要素を修飾したい

コンポーネントを登録するときに、直接コンストラクタを指定するのではなく、ファクトリメソッドをつかうと、コンポーネントのDOM 要素が取れる

修正前

ko.components.register('color-slider', {
  viewModel: colorMdl,
  template: colorView
});

修正後

ko.components.register('color-slider', {
  viewModel: {
    createViewModel: function(params, componentInfo) {
      return new colorMdl(params, componentInfo);
    }
  },
  template: colorView
});

componentInfo.element で、DOM 要素 (<div>) が取れる

HTML#Knockout