jQuery UI の autocomplete と knockout.js を組み合わせた場合の問題点

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

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


ソースコード

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>knockdown.js Ex10</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/knockoutExA_init.js"></script>
  </head>
  <body>
  	<fieldset>
  		<legend>未対策</legend>
	  	<input id="tags1" data-bind="value: lang1, valueUpdate: 'afterkeydown'">
	  	⇒ <span data-bind="text: lang1"></span><br/>
	  	マウスで候補を選択すると、選択結果が View Model に反映されない
  	</fieldset>
  	<fieldset>
  		<legend>対策済み</legend>
	  	<input id="tags2" data-bind="value: lang2, valueUpdate: ['afterkeydown', 'blur']">
	  	⇒ <span data-bind="text: lang2"></span><br/>
	  	マウスで候補を選択しても、フォーカスが外れた段階で View Model に反映される
  	</fieldset>
  </body>
</html>

https://github.com/kagyuu/KnockoutExam/blob/master/js/knockoutExA_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/knockoutExA_vmodel', 'jquery', 'jqueryui', 'domReady!'],
  function(ko, vmdl, $) {
    ko.applyBindings(new vmdl());
    
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags1" ).autocomplete({
      source: availableTags
    });
    $( "#tags2" ).autocomplete({
      source: availableTags
    });
  }
);

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

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

  return function appViewModel() {
    var self = this;
    self.lang1 = ko.observable();
    self.lang2 = ko.observable();
  };
});


HTML#Knockout


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