cf. knockout.js
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>knockdown.js Ex8</title> <link rel="stylesheet" type="text/css" media="screen" href="js/lib/jquery-ui-1.11.3/jquery-ui.min.css"> <style> h1 { color: hsl(120, 50%, 50%); padding-left: 5px; border-bottom: 4px solid hsl(120, 50%, 50%); font-size: medium; } hr { border: 0; border-bottom: 1px dashed #ccc; background: #999; } .dashedBox { width : 350px; min-height : 25px; border :1px dashed; padding : 15px; } .dashedTable { border-collapse: collapse; } .dashedTable th { background-color: #eee; border :1px dashed; } .dashedTable td { border :1px dashed; padding : 5px; } button:disabled { color : lightblue; background-color: transparent; border : none; } </style> <script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx8_init.js"></script> </head> <body> <h1>Click Binding Example</h1> <div class="dashedBox" data-bind="click: divClick"> <a href="#" data-bind="click: aClick, clickBubble: false">Click</a> <button data-bind="click: btnClick, clickBubble: false">Click</button> </div> <span data-bind="text: msgClick"></span> <h1>Event Binding Example</h1> <div class="dashedBox" data-bind="event: { mouseover: mouseIn, mouseout: mouseOut}"> <span data-bind="text: msgEvent"></span> </div> <h1>Submit Binding Example</h1> <div class="dashedBox"> <form data-bind="submit: submit"> X : <input type="text" name="x" value="0.0"/><br/> Y : <input type="text" name="y" value="0.0"/><br/> Z : <input type="text" name="z" value="0.0"/><br/> <input type="reset"/> <input type="submit"/> </form> </div> <span data-bind="text: msgSubmit"></span> <h1>Enable/disable Binding Example</h1> <div class="dashedBox"> You must accept the License Agreement to download this software.<br/> <input type="radio" name="licenseAgree" value="accept" data-bind="checked: acceptCheck"/> Accept <input type="radio" name="licenseAgree" value="decline" data-bind="checked: acceptCheck"/> Decline <button data-bind="enable : acceptCheck() === 'accept'">Download</button> <button data-bind="disable : acceptCheck() === 'accept'">Cancel</button> </div> <h1>Value Binding Example</h1> <table class="dashedTable"> <thead> <tr><th rowspan="2"></th><th rowspan="2"></th><th rowspan="2">data-bind</th><th colspan="3">When Update View Model</th></tr> <tr> <th>lost focus</th> <th>key down</th> <th>clip board<br/>drag&drop</th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <input type="text" data-bind="value : txtValue1"/> <span data-bind="text : txtLength1"></span> 文字 </td> <td>data-bind="value : txtValue1"</td> <td>?</td><td></td> <td></td> </tr> <tr> <td>2</td> <td> <input type="text" data-bind="value : txtValue2, valueUpdate: 'afterkeydown'"/> <span data-bind="text : txtLength2"></span> 文字</td> <td>data-bind="value : txtValue2, valueUpdate: 'afterkeydown'"</td> <td>?</td><td>?</td><td></td> </tr> <tr> <td>3</td> <td> <input type="text" data-bind="textInput : txtValue3"/> <span data-bind="text : txtLength3"></span> 文字</td> <td>data-bind="textInput : txtValue3"</td> <td>?</td><td>?</td><td>?</td> </tr> </tbody> </table> <h1>Hasfocus Binding Example</h1> <div class="dashedBox"> <input type="text" size="40" style="vertical-align: middle;" data-bind="textInput : focusValue, hasFocus: isFocused"/> <button style="vertical-align: middle;" data-bind="click : focusClick, css : {'ui-state-error' : focusValue() === ''}"> <span class="ui-icon ui-icon-search"></span> </button> </div> <h1>Checked Binding Example</h1> <div class="dashedBox"> <fieldset> <legend>Single Checkbox</legend> <label><input type="checkbox" data-bind="checked: chkOk"/> I like fruits.</label> </fieldset> <fieldset> <legend>Multiple Checkbox</legend> <label><input type="checkbox" value="Apple" data-bind="checked: chkFruits, enable: chkOk"/> Apple </label> <label><input type="checkbox" value="Banana" data-bind="checked: chkFruits, enable: chkOk"/> Banana </label> <label><input type="checkbox" value="Grape" data-bind="checked: chkFruits, enable: chkOk"/> Grape </label> </fieldset> <fieldset> <legend>Radio Button</legend> <label><input type="radio" name="vegetable" value="Juce" data-bind="checked: radEat, enable: chkOk"/> Juce </label> <label><input type="radio" name="vegetable" value="Cocktail" data-bind="checked: radEat, enable: chkOk"/> Cocktail </label> <label><input type="radio" name="vegetable" value="Pie" data-bind="checked: radEat, enable: chkOk"/> Pie </label> </fieldset> <button data-bind="click : chkOrder, enable: (chkOk() && chkFruits().length > 0)">Order</button> </div> <div id="dialog"> <img src="img/apple.png" data-bind="visible: chkFruits().indexOf('Apple') >= 0"/> <img src="img/banana.png" data-bind="visible: chkFruits().indexOf('Banana') >= 0"/> <img src="img/grape.png" data-bind="visible: chkFruits().indexOf('Grape') >= 0"/> </div> <h1>Options/SelectOptions Binding Example</h1> <div class="dashedBox"> <select style="vertical-align: top;" data-bind="options: selFruitsOptions, selectedOptions: selFruits" size="5" multiple="true"></select> <select style="vertical-align: top;" data-bind="options: selEatOptions, value: selEat, optionsCaption: '-選択してください-'"></select> <button style="vertical-align: top;" data-bind="click : selOrder, enable: selEat">Order</button> </div> <div id="dialog2"> <img src="img/apple.png" data-bind="visible: selFruits().indexOf('Apple') >= 0"/> <img src="img/banana.png" data-bind="visible: selFruits().indexOf('Banana') >= 0"/> <img src="img/grape.png" data-bind="visible: selFruits().indexOf('Grape') >= 0"/> </div> </body> </html>
/* * アプリケーションのイニシャライザ. */ require.config({ // Javascript の Base Url baseUrl: 'js/lib', // ライブラリのパスの別名を定義する paths: { 'app': '../', 'knockout' : 'knockout-3.2.0', // jQuery 1.7〜, Query UI 1.11〜 は AMD に対応 'jquery' : 'jquery-ui-1.11.3/external/jquery/jquery', 'jqueryui' : 'jquery-ui-1.11.3/jquery-ui.min', }, // AMDに対応してないモジュールを読み込む shim: { } }); require(['knockout', 'app/knockoutEx8_vmodel', 'jquery', 'jqueryui', 'domReady!'], function(ko, vmdl, $) { ko.applyBindings(new vmdl()); $( "#dialog" ).dialog({ autoOpen: false, width: 400 }); $( "#dialog2" ).dialog({ autoOpen: false, width: 400 }); } );
/* * アプリケーションの View Model. */ define(['knockout','jquery'], function(ko,$) { return function appViewModel() { var self = this; // Click Binding Example self.msgClick = ko.observable(""); self.divClick = function (data, event) { self.msgClick("div " + (event.shiftKey ? "+Shift" : "")); }; self.aClick = function (data, event) { self.msgClick("link " + (event.shiftKey ? "+Shift" : "")); }; self.btnClick = function (data, event) { self.msgClick("button " + (event.shiftKey ? "+Shift" : "")); }; // Event Binding Example self.msgEvent = ko.observable(""); self.mouseIn = function (data, event) { self.msgEvent("Welcome"); }; self.mouseOut = function (data, event) { self.msgEvent(""); }; // Submit Binding Example self.msgSubmit = ko.observable(""); self.submit = function (formElement) { self.msgSubmit($(formElement).serialize()); return false; }; // Enable/disable Binding Example self.acceptCheck = ko.observable("decline"); // Value Binding Example self.txtValue1 = ko.observable(""); self.txtLength1 = ko.computed(function(){ return self.txtValue1().length; }); self.txtValue2 = ko.observable(""); self.txtLength2 = ko.computed(function(){ return self.txtValue2().length; }); // Text Input Binding Examle self.txtValue3 = ko.observable(""); self.txtLength3 = ko.computed(function(){ return self.txtValue3().length; }); // Hasfocus Binding Example self.focusValue = ko.observable(""); self.isFocused = ko.observable(false); self.focusClick = function(){ if (self.focusValue() === '') { self.isFocused(true); } else { alert(self.focusValue()); } } // Checked Binding Example self.chkOk = ko.observable(false); self.chkFruits = ko.observableArray(); self.radEat = ko.observable("Juce"); self.chkOrder = function() { $( "#dialog" ) .dialog( "option" , { title : self.radEat() }) .dialog( "open" ); } // Options/SelectOptions Binding Example self.selFruitsOptions = ko.observableArray(['Apple','Banana','Grape']); self.selFruits = ko.observableArray(['Apple']); self.selEatOptions = ko.observableArray(['Juce','Cocktail','Pie']); self.selEat = ko.observable(); self.selOrder = function() { $( "#dialog2" ) .dialog( "option" , { title : self.selEat() }) .dialog( "open" ); } }; });
<h1>Click Binding Example</h1> <p> <span style="border :1px dashed; padding : 15px" data-bind="click: divClick"> <a href="#" data-bind="click: aClick, clickBubble: false">Click</a> <button data-bind="click: btnClick, clickBubble: false">Click</button> </span> <span data-bind="text: msgClick"></span> </p>
// Click Binding Example self.msgClick = ko.observable(""); self.divClick = function (data, event) { self.msgClick("div " + (event.shiftKey ? "+Shift" : "")); }; self.aClick = function (data, event) { self.msgClick("link " + (event.shiftKey ? "+Shift" : "")); }; self.btnClick = function (data, event) { self.msgClick("button " + (event.shiftKey ? "+Shift" : "")); };
<h1>Event Binding Example</h1> <p> <div class="dashedBox" data-bind="event: { mouseover: mouseIn, mouseout: mouseOut}"> <span data-bind="text: msgEvent"></span> </div> </p>
// Event Binding Example self.msgEvent = ko.observable(""); self.mouseIn = function (data, event) { self.msgEvent("Welcome"); }; self.mouseOut = function (data, event) { self.msgEvent(""); };
<h1>Submit Binding Example </h1> <div class="dashedBox"> <form data-bind="submit: submit"> X : <input type="text" name="x" value="0.0"/><br/> Y : <input type="text" name="y" value="0.0"/><br/> Z : <input type="text" name="z" value="0.0"/><br/> <input type="reset"/> <input type="submit"/> </form> </div> <span data-bind="text: msgSubmit"></span>
// Submit Binding Example self.msgSubmit = ko.observable(""); self.submit = function (formElement) { self.msgSubmit($(formElement).serialize()); };
<h1>Enable/disable Binding Example</h1> <div class="dashedBox"> You must accept the License Agreement to download this software.<br/> <input type="radio" name="licenseAgree" value="accept" data-bind="checked: acceptCheck"/> Accept <input type="radio" name="licenseAgree" value="decline" data-bind="checked: acceptCheck"/> Decline <button data-bind="enable : acceptCheck() === 'accept'">Download</button> <button data-bind="disable : acceptCheck() === 'accept'">Cancel</button> </div>
// Enable/disable Binding Example self.acceptCheck = ko.observable("decline");
<input id="txtValue1" type="text" data-bind="value : txtValue1"/> <span data-bind="text : txtLength1"></span> 文字 <input id="txtValue2" type="text" data-bind="value : txtValue2, valueUpdate: 'afterkeydown'"/> <span data-bind="text : txtLength2"></span> 文字</td> <input id="txtValue3" type="text" data-bind="textInput : txtValue3"/> <span data-bind="text : txtLength3"></span> 文字</td>
// Value Binding Example self.txtValue1 = ko.observable(""); self.txtLength1 = ko.computed(function(){ return self.txtValue1().length; }); self.txtValue2 = ko.observable(""); self.txtLength2 = ko.computed(function(){ return self.txtValue2().length; }); // Text Input Binding Examle self.txtValue3 = ko.observable(""); self.txtLength3 = ko.computed(function(){ return self.txtValue3().length; });
<h1>Hasfocus Binding Example</h1> <div class="dashedBox"> <input type="text" size="40" style="vertical-align: middle;" data-bind="textInput : focusValue, hasFocus: isFocused"/> <button style="vertical-align: middle;" data-bind="click : focusClick"> <span class="ui-icon ui-icon-search"></span> </button> </div>
// Hasfocus Binding Example self.focusValue = ko.observable(""); self.isFocused = ko.observable(false); self.focusClick = function(){ if (self.focusValue() === '') { self.isFocused(true); } else { alert(self.focusValue()); } }
<label><input type="checkbox" data-bind="checked: chkOk"/> I like fruits.</label>
self.chkOk = ko.observable(false);単一のチェックボックスは ko.obervable にバインドする。値は true/false
<label><input type="checkbox" value="Apple" data-bind="checked: chkFruits, enable: chkOk"/> Apple </label> <label><input type="checkbox" value="Banana" data-bind="checked: chkFruits, enable: chkOk"/> Banana </label> <label><input type="checkbox" value="Grape" data-bind="checked: chkFruits, enable: chkOk"/> Grape </label>
self.chkFruits = ko.observableArray();複数選択のチェックボックスの場合は ko.observableArray にバインドする。値には、value が入る
<label><input type="radio" name="vegetable" value="Juce" data-bind="checked: radEat, enable: chkOk"/> Juce </label> <label><input type="radio" name="vegetable" value="Cocktail" data-bind="checked: radEat, enable: chkOk"/> Cocktail </label> <label><input type="radio" name="vegetable" value="Pie" data-bind="checked: radEat, enable: chkOk"/> Pie </label>
self.radEat = ko.observable("Juce");
input> の name は同じにする。
ラジオボタンは ko.obervable にバインドする。値は value。
<select style="vertical-align: top;" data-bind="options: selFruitsOptions, selectedOptions: selFruits" size="5" multiple="true"> </select>
self.selFruitsOptions = ko.observableArray(['Apple','Banana','Grape']); self.selFruits = ko.observableArray(['Apple']);
<select style="vertical-align: top;" data-bind="options: selEatOptions, value: selEat, optionsCaption: '-選択してください-'"> </select>
self.selEatOptions = ko.observableArray(['Juce','Cocktail','Pie']); self.selEat = ko.observable();