これは何?

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

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


View

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>knockdown.js Ex11</title>
    <link rel="stylesheet" type="text/css" media="screen" href="js/lib/jquery-Validation-Engine-2.6.2/validationEngine.jquery.css">
    <script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutExB_init.js"></script>
  </head>
  <body>
  	<br/>
  	<br/>
   	<form id="myForm" data-bind="submit: submitFunc">
   		<input type="text" size="40" maxlength="20" data-bind="value: name, uniqueName: true" class="validate[required]"><br/>
   		<input type="reset"/> <input type="submit"/>
   	</form>  
  </body>
</html>

Init

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutExB_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',
   'validationEngine' : 'jquery-Validation-Engine-2.6.2/jquery.validationEngine',
   'validation' : 'jquery-Validation-Engine-2.6.2/languages/jquery.validationEngine-ja'
  },

  // AMDに対応してないモジュールを読み込む
  shim: {
    'validationEngine' : ['jquery', 'validation'],
    'validation' : ['jquery'],    
  }
});

require(['knockout', 'app/knockoutExB_vmodel', 'jquery', 'validation', 'validationEngine', 'domReady!'],
  function(ko, vmdl, $) {
    ko.applyBindings(new vmdl());
    
    $('#myForm').validationEngine('attach');
  }
);

ViewModel?

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

/*
 * アプリケーションの View Model.
 */
define(['knockout', 'jquery', 'validation', 'validationEngine'], function(ko,$) {

  return function appViewModel() {
    var self = this;
    self.name = ko.observable();
	self.submitFunc = function (formElement) {
		if ($(formElement).validationEngine('validate') ) {
			alert('Form is valid');
			return false;
		}
		
		alert('Form is invalid');
		return false;
	};
  };
});

jQuery Validation Engine による入力検証便覧

source : https://github.com/kagyuu/KnockoutExam/blob/master/knockoutExC_validate.html

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


この他に ajax も指定できるらしいけど、それはやり過ぎかな


HTML#Knockout


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-03-17 (火) 23:03:04 (631d)
ISBN10
ISBN13
9784061426061