![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
HTML KnockoutJS data-bind7 Original Component |
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
});
