入力欄にマウスを置くと、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'; }; });