![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
HTML KnockoutJS jQueryUIと組み合わせる |
入力欄にマウスを置くと、tooltip が表示される
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockdown.js with jQuery</title>
<link rel="stylesheet" type="text/css" media="screen" href="js/lib/jquery-ui-1.11.3/jquery-ui.min.css">
<script type="text/javascript" charset="UTF-8" src="js/lib/require.js" data-main="js/knockoutEx2_init.js"></script>
</head>
<body>
<p>First name: <input id="firstName" data-bind="value: firstName" title="個人名を入力してください"/></p>
<p>Last name : <input id="lastName" data-bind="value: lastName" title="姓を入力してください"/></p>
<p>Full name : <strong data-bind="text: fullName"></strong></p>
<button data-bind='click: registerClick, disable: isEnableRegister'>Search</button>
</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: {
}
});
// インタフェースオブジェクトを返さないやつ(jqueryui, domReady)は、最後に読み込む
require(['knockout', 'app/knockoutEx2_vmodel', 'app/knockoutEx2_model', 'jquery', 'jqueryui', 'domReady!'],
function(ko, vmdl, mdl, $) {
// knockout.js
ko.applyBindings(new vmdl(new mdl()));
// jQuery UI の tooltip
$('input').tooltip({
items: '[title]',
content: function() {
var message = $(this).attr('title');
return '<strong>' + message + '</strong><br/>よろしくお願いします';
}
});
}
);/*
* アプリケーションの View Model.
*/
define(['knockout', 'jquery'], function(ko, $) {
return function appViewModel(mdl) {
this.firstName = ko.observable(mdl.firstName);
this.lastName = ko.observable(mdl.lastName);
/**
* フルネーム.
*/
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName().toUpperCase();
}, this);
/**
* 登録ボタンクリック時の処理.
*/
this.registerClick = function() {
// View Model を Model に書き戻す
mdl.firstName = this.firstName();
mdl.lastName = this.lastName();
// 登録処理 (本当はサーバーアクセス)
console.log($);
alert(JSON.stringify(mdl));
};
/**
* 登録ボタンの有効化フラグ.
*/
this.isEnableRegister = ko.computed(function() {
return '' === this.firstName() || '' === this.lastName();
}, this);
};
});/*
* アプリケーションの Model.
*/
define(function() {
return function appModel() {
this.firstName = 'Bert';
this.lastName = 'Simpson';
};
});
