これは何?

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

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


入力欄にマウスを置くと、tooltip が表示される

View

https://github.com/kagyuu/KnockoutExam/blob/master/knockoutEx2_Ko%2BjQuery.html

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

Init

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutEx2_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: {
  }
});

// インタフェースオブジェクトを返さないやつ(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/>よろしくお願いします';
    }    
    });
  }
);

ViewModel?

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

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

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

/*
 * アプリケーションの Model.
 */
define(function() {
  return function appModel() {
    this.firstName = 'Bert';
    this.lastName = 'Simpson';
  };
});


HTML#Knockout


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-02-19 (木) 02:11:10 (3545d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=a4eb3b6e00
ISBN10
ISBN13
9784061426061