cf. knockout.js
<div data-bind="component: {name : 'color-slider', params : {r:100, g:128, b:156, setThisComponent:setComponent1}}"></div>というようにコンポーネント名と引数を指定して呼び出す
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); };
ko.components.register('color-slider', { viewModel: colorMdl, template: colorView });
<!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>
/* * アプリケーションのイニシャライザ. */ 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()); } );
/* * アプリケーションの 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()); } } }; });
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); }; });
<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>
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 });