HTML KnockoutJS data-bind6 Form Component

2017-09-202017
71.8% (262.3/365)
September
64.3% (19.3/30)
Week 38
32.9% (2.3/7)
Day 20 Wed
30.9% (7.4/24)

訪問者

total: 1534
today: 2
yesterday: 1
now: 4

↑

更新

MenuBar

サンプルアプリケーション
ソースコード
Click Binding
Event Binding
Submit Binding
Enable/disable Binding
Value Binding
Hasfocus Binding
Checked Binding
Options/SelectedOptions Binding

cf. knockout.js

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

↑

ソースコード †

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

<!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&amp;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>

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

/*
 * アプリケーションのイニシャライザ.
 */
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 });
  }
  
);

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

/*
 * アプリケーションの 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" );
	}
  };
});

↑

Click Binding †

HTML

   <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>&nbsp;
       <button data-bind="click: btnClick, clickBubble: false">Click</button>&nbsp;
     </span>
     &nbsp;<span data-bind="text: msgClick"></span>
   </p>

View Model

   // 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" : ""));
   };

form tag に click 時の処理をバインディングする
イベントハンドラの引数は function (data, event) {...}
- data : イベントハンドラが呼ばれた時点でのコンテキスト。cf. テーブルの delete ボタン押下処理 → HTML KnockoutJS data-bind2 foreach
- event : クリックイベントのイベントオブジェクト。keyCode で、クリック時に押されていたキーコードを取得できる。shift/ctrl の同時押し判別のためには、専用の boolean のプロパティ shiftKey, ctrlKey がある。
イベントバブルを防ぐためには、HTML の data-bind で "clickBubble: false" を指定する必要あり。そうしないと、ボタンクリックで DIVクリックイベントも走ってしまう。

↑

Event Binding †

HTML

   <h1>Event Binding Example</h1>
   <p>
     <div class="dashedBox" data-bind="event: { mouseover: mouseIn, mouseout: mouseOut}">
     	<span data-bind="text: msgEvent"></span>
     </div>
   </p>

View Model

   // Event Binding Example
   self.msgEvent = ko.observable("");
   self.mouseIn = function (data, event) {
     self.msgEvent("Welcome");
   };
   self.mouseOut = function (data, event) {
     self.msgEvent("");
   };

イベント処理。第一引数にコンテキストオブジェクト。第二引数に Event
Document Object Model (DOM) Level 3 Events Specification, http://www.w3.org/TR/DOM-Level-3-Events/

↑

Submit Binding †

HTML

   <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"/>&nbsp;<input type="submit"/>
   	</form>
	</div>
	<span data-bind="text: msgSubmit"></span>

View Model

   // Submit Binding Example
   self.msgSubmit = ko.observable("");
   self.submit = function (formElement) {
     self.msgSubmit($(formElement).serialize());
   };

Form Submit 時の処理をバインディングする
click との違いは、text フィールドで、エンターキーを押した時に submit されること
- 普通の業務画面ならわざわざ無視するようにするイベント
- 検索ボックスでなら、検索語句を入力してエンターキーで検索が走って欲しいところ
イベントハンドラの引数は Form (DOM要素)
- (無理に使わなくてもいい)

↑

Enable/disable Binding †

HTML

   <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>

View Model

   // Enable/disable Binding Example
   self.acceptCheck = ko.observable("decline");

disabled 属性の on/off を切り替える

↑

Value Binding †

HTML

	<input id="txtValue1" type="text" data-bind="value : txtValue1"/>&nbsp;
	<span data-bind="text : txtLength1"></span> 文字
	<input id="txtValue2" type="text" data-bind="value : txtValue2, valueUpdate: 'afterkeydown'"/>&nbsp;
	<span data-bind="text : txtLength2"></span> 文字</td>
	<input id="txtValue3" type="text" data-bind="textInput : txtValue3"/>&nbsp;
	<span data-bind="text : txtLength3"></span> 文字</td>

View Model

   // 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; 
   });

<input> <textarea> <select> の入力値をバインドする
"value" バインディングでは、付帯する valueUpdate で、view model を更新するタイミングを指定できる
- "valueUpdate : 'keyup'"
- "valueUpdate : 'keypress'"
- "valueUpdate : 'afterkeydown'" keydown後に非同期で update する。おすすめ
"value" バインディングは、clip board や drag&drop に対応していないので、"textInput" バインディングが追加された
- "textInput" バインディング = "value" バインディング + "valueUpdate : 'afterkeydown'" + Clipboard対応
- "value" バインディングの場合 Clipboard 経由ではいつけられた文字列は lost focus で view model に反映される

↑

Hasfocus Binding †

HTML

   <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>

View Model

   // 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());
   	}
   }

hasFocus バインディングは、Form Component のフォーカスを制御する
これも双方向バインディングなので View Model 側で、true に設定すると、そのコンポーネントにフォーカスが移る (サンプルでは、何も入力しない状態で、検索ボタンを押すとテキスト入力欄にフォーカスが移る)

↑

Checked Binding †

単一のチェックボックス
```
<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。

↑

Options/SelectedOptions? Binding †

複数選択の select

<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']);

候補は、options で ko.observableArray を指定する
選択内容は selectedOptions で ko.observableArray を指定する
Javascript 側から、候補を増やしたり、選択内容を返ることができる

単一選択の select
```
<select style="vertical-align: top;" 
  data-bind="options: selEatOptions, value: selEat, optionsCaption: '-選択してください-'">
</select>
```
```
self.selEatOptions = ko.observableArray(['Juce','Cocktail','Pie']);
self.selEat = ko.observable();
```
- 候補は、options で ko.observableArray を指定する
- 選択内容は value で ko.observable を指定する
- optionsCaption は、無選択時のデフォルト値、このとき value には undefined が設定される
- こちらも Javascript 側から、候補を増やしたり、選択内容を返ることができる
オブジェクトを設定する
- options に Object を設定した場合には、選択肢に何を設定するか、選択時にどの値を view model に返すかを設定できる
- optionsText : <select><option> で表示する文字列の Object のフィールド名
- optionsValue : 洗濯時に view model に設定される値の Object のフィールド名

HTML#Knockout

HTML KnockoutJS data-bind6 Form Component

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

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

ソースコード †

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

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

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

Click Binding †

Event Binding †

Submit Binding †

Enable/disable Binding †

Value Binding †

Hasfocus Binding †

Checked Binding †

Options/SelectedOptions? Binding †