cf. knockout.js
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>knockdown.js Ex4</title> <style> h1 { color: hsl(120, 50%, 50%); padding-left: 5px; border-bottom: 4px solid hsl(120, 50%, 50%); font-size: medium; } .colRed { color: red; } .colOrange { color: orange; } .colBlue { color: blue; } </style> <script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx4_init.js"></script> </head> <body> <h1>Visible, If, Ifnot Binding Example</h1> <div data-bind="visible: shouldShowMessage"> visible このメッセージは "shouldShowMessage" が true を保持している場合にのみ表示されます。 </div> <div data-bind="if: shouldShowMessage"> if このメッセージは "shouldShowMessage" が true を保持している場合にのみ存在します。 </div> <div data-bind="ifnot: shouldShowMessage"> ifnot このメッセージは "shouldShowMessage" が false を保持している場合にのみ存在します。 </div> <button data-bind="click: btnShowMessageClick, text: shouldShowMessage() ? 'Hide' : 'Show'"></button> <h1>Text Binding Example</h1> <p> <input type="range" min="0" max="50" data-bind="value: sldValue"/> <span data-bind="text: txtValue"></span> </p> <h1>HTML Binding Example</h1> <p> <div data-bind="html: planet" style="width:240px"></div> <button data-bind="click: btnPrevPlaent">Prev</button> <button data-bind="click: btnNextPlaent">Next</button> </p> <h1>CSS Binding Example</h1> <p> <label><input type="radio" name="color" value="Red" data-bind="checked: radioSelectOptionValues" />Red</label> <label><input type="radio" name="color" value="Orange" data-bind="checked: radioSelectOptionValues" />Orange</label> <label><input type="radio" name="color" value="Blue" data-bind="checked: radioSelectOptionValues" />Blue</label> ⇒ <span data-bind="text: txtColor, css: cssColor"></span><br/> <input type="range" min="-100" max="100" data-bind="value: sldCss"/> ⇒ <span data-bind="text: txtCss, css : {colBlue : sldCss() < 0, colRed : sldCss() > 50}"></span> </p> <h1>Style Binding Example</h1> <p> <input type="range" min="-100" max="100" data-bind="value: sldStyle"/> ⇒ <span data-bind="text: txtStyle, style : {color : (sldStyle() < 0 ? 'blue' : 'red'), fontWeight : (sldStyle() < 0 ? 'bold' : 'normal')}"></span> <!-- CSS の font-weight など "-" を含む Style 属性は、knockout.js では Camel(らくだ) にする ex. font-weight -> fontWeight) --> </p> <h1>Attribute Binding Example</h1> <p> <label><input type="radio" name="pen" value="Rotling" data-bind="checked: radioPen" />Rotling</label> <label><input type="radio" name="pen" value="Sheaffer" data-bind="checked: radioPen" />Sheaffer</label> <label><input type="radio" name="pen" value="Parker" data-bind="checked: radioPen" />Parker</label><br/> <a href="" data-bind="text: penHref, attr : {href : penHref}"></a> <!-- href="" がないと、リンクの CSS が適用されない --> </p> </body> </html>
/* * アプリケーションのイニシャライザ. */ require.config({ // Javascript の Base Url baseUrl: 'js/lib', // ライブラリのパスの別名を定義する paths: { 'app': '../', 'knockout' : 'knockout-3.2.0', }, // AMDに対応してないモジュールを読み込む shim: { } }); require(['knockout', 'app/knockoutEx4_vmodel', 'domReady!'], function(ko, vmdl) { ko.applyBindings(new vmdl()); } );
/* * アプリケーションの View Model. */ define(['knockout'], function(ko) { return function appViewModel() { // ---------- visible this.shouldShowMessage = ko.observable(false); this.btnShowMessageClick = function() { this.shouldShowMessage(!this.shouldShowMessage()); }; // ---------- text this.sldValue = ko.observable(0); this.txtValue = ko.computed(function() { return this.sldValue(); }, this); // ---------- html this.planetNo = ko.observable(0); this.planet = ko.computed(function() { return "<fieldset>" + "<legend>" + PLANETS[this.planetNo()].name + "</legend>" + "<img src=\"" + PLANETS[this.planetNo()].img + "\" width=\"200px\" height=\"200px\"/>" + "</fieldset></div>"; }, this); this.btnNextPlaent = function() { this.planetNo((this.planetNo() + 1) % PLANETS.length); }; this.btnPrevPlaent = function() { var prev = this.planetNo() - 1; this.planetNo(prev > 0 ? prev : PLANETS.length - 1); }; // ---------- css this.radioSelectOptionValues = ko.observable("Orange"); this.txtColor = ko.computed(function() { return this.radioSelectOptionValues(); }, this); this.cssColor = ko.computed(function() { return 'col' + this.radioSelectOptionValues(); }, this); this.sldCss = ko.observable(0); this.txtCss = ko.computed(function() { return this.sldCss(); }, this); // ---------- style this.sldStyle = ko.observable(0); this.txtStyle = ko.computed(function() { return this.sldStyle(); }, this); // ---------- attribute this.radioPen = ko.observable('Rotling'); this.penHref = ko.computed(function() { switch(this.radioPen()) { case 'Rotling': return "http://www.rotring.com/"; case 'Sheaffer': return "https://www.sheaffer.com/"; default: return "http://www.parkerpen.com/"; }; }, this); }; }); var PLANETS = [ {name : 'Earth', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/240px-Earth_Eastern_Hemisphere.jpg"}, {name : 'Mars', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Mars_Valles_Marineris.jpeg/240px-Mars_Valles_Marineris.jpeg"}, {name : 'Jupiter', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Jupiter_by_Cassini-Huygens.jpg/249px-Jupiter_by_Cassini-Huygens.jpg"}, {name : 'Saturn', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Saturn-cassini-March-27-2004.jpg/320px-Saturn-cassini-March-27-2004.jpg"}, {name : 'Uranus', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Uranus2.jpg/240px-Uranus2.jpg"}, {name : 'Neptune', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/244px-Neptune.jpg"}, {name : 'Mercury', img : "http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Mercury_in_color_-_Prockter07_centered.jpg/242px-Mercury_in_color_-_Prockter07_centered.jpg"}, {name : 'Venus', img : "http://upload.wikimedia.org/wikipedia/commons/e/e5/Venus-real_color.jpg"}, ];
<h1>Visible Binding Example</h1> <div data-bind="visible: shouldShowMessage"> visible このメッセージは "shouldShowMessage" が true を保持している場合にのみ表示されます。 </div> <div data-bind="if: shouldShowMessage"> if このメッセージは "shouldShowMessage" が true を保持している場合にのみ存在します。 </div> <div data-bind="ifnot: shouldShowMessage"> ifnot このメッセージは "shouldShowMessage" が false を保持している場合にのみ存在します。 </div> <button data-bind="click: btnShowMessageClick, text: shouldShowMessage() ? 'Hide' : 'Show'"></button>
this.shouldShowMessage = ko.observable(false); this.btnShowMessageClick = function() { this.shouldShowMessage(!this.shouldShowMessage()); };
<h1>Text Binding Example</h1> <p> <input type="range" min="0" max="50" data-bind="value: sldValue"/> <span data-bind="text: txtValue"></span> </p>
this.sldValue = ko.observable(0); this.txtValue = ko.computed(function() { return this.sldValue(); }, this);
<span data-bind="text: price() > 50 ? '高額' : '安価'"></span>
<h1>HTML Binding Example</h1> <p> <div data-bind="html: planet" style="width:240px"></div> <button data-bind="click: btnPrevPlaent">Prev</button> <button data-bind="click: btnNextPlaent">Next</button> </p>
this.planetNo = ko.observable(0); this.planet = ko.computed(function() { return "<fieldset>" + "<legend>" + PLANETS[this.planetNo()].name + "</legend>" + "<img src=\"" + PLANETS[this.planetNo()].img + "\" width=\"200px\" height=\"200px\"/>" + "</fieldset></div>"; }, this); this.btnNextPlaent = function() { this.planetNo((this.planetNo() + 1) % PLANETS.length); }; this.btnPrevPlaent = function() { var prev = this.planetNo() - 1; this.planetNo(prev > 0 ? prev : PLANETS.length - 1); };
.colRed {     color: red; } .colOrange {     color: orange; } .colBlue {     color: blue; }
<h1>CSS Binding Example</h1> <p> <label><input type="radio" name="color" value="Red" data-bind="checked: radioSelectOptionValues" />Red</label> <label><input type="radio" name="color" value="Orange" data-bind="checked: radioSelectOptionValues" />Orange</label> <label><input type="radio" name="color" value="Blue" data-bind="checked: radioSelectOptionValues" />Blue</label> ⇒ <span data-bind="text: txtColor, css: cssColor"></span><br/> <input type="range" min="-100" max="100" data-bind="value: sldCss"/> ⇒ <span data-bind="text: txtCss, css : {colBlue : sldCss() < 0, colRed : sldCss() > 50}"></span> </p>
this.radioSelectOptionValues = ko.observable("Orange"); this.txtColor = ko.computed(function() { return this.radioSelectOptionValues(); }, this); this.cssColor = ko.computed(function() { return 'col' + this.radioSelectOptionValues(); }, this); this.sldCss = ko.observable(0); this.txtCss = ko.computed(function() { return this.sldCss(); }, this); var PLANETS = [ {name : 'Earth', img : "http://upload.wikimedia.org/wik ...}, {...}, ... ];
<input type="range" min="-100" max="100" data-bind="value: sldCss"/>
<span data-bind="text: txtCss, css : {colBlue : sldCss() < 0, colRed : sldCss() > 50}"></span>
<h1>Style Binding Example</h1> <p> <input type="range" min="-100" max="100" data-bind="value: sldStyle"/> ⇒ <span data-bind="text: txtStyle, style : {color : (sldStyle() < 0 ? 'blue' : 'red'), fontWeight : (sldStyle() < 0 ? 'bold' : 'normal')}"></span> <!-- CSS の font-weight など "-" を含む Style 属性は、knockout.js では Camel(らくだ) にする ex. font-weight -> fontWeight) --> </p>
this.sldStyle = ko.observable(0); this.txtStyle = ko.computed(function() { return this.sldStyle(); }, this);
<h1>Attribute Binding Example</h1> <p> <label><input type="radio" name="pen" value="Rotling" data-bind="checked: radioPen" />Rotling</label> <label><input type="radio" name="pen" value="Sheaffer" data-bind="checked: radioPen" />Sheaffer</label> <label><input type="radio" name="pen" value="Parker" data-bind="checked: radioPen" />Parker</label><br/> <a href="" data-bind="text: penHref, attr : {href : penHref}"></a> <!-- href="" がないと、リンクの CSS が適用されない --> </p>
this.radioPen = ko.observable('Rotling'); this.penHref = ko.computed(function() { switch(this.radioPen()) { case 'Rotling': return "http://www.rotring.com/"; case 'Sheaffer': return "https://www.sheaffer.com/"; default: return "http://www.parkerpen.com/"; }; }, this);
<button data-bind="disable : btnDisabled">GO!</button> this.btnDisabled = ko.computed(function() { // 項目 A,B,C のどれかが空欄なら GO! ボタンは押せない return this.a() === '' || this.b() === '' === this.c() === ''; })のように、true/false で disable 属性の有り無しを切り替える