cf. knockout.js

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

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /KnockoutExam/knockoutEx8_form.html
↑

ソースコード †

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 †

↑

Event Binding †

↑

Submit Binding †

↑

Enable/disable Binding †

↑

Value Binding †

↑

Hasfocus Binding †

↑

Checked Binding †

↑

Options/SelectedOptions? Binding †

HTML#Knockout

添付ファイル: filedisabled.png 2287件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-03-14 (土) 22:39:43 (3553d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=619db82e22
ISBN10
ISBN13
9784061426061