「特定の文字を装飾したい2 - カスタムバインディングを使う」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

特定の文字を装飾したい2 - カスタムバインディングを使う

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>特定の文字を装飾したい2 - カスタムバインディングを使う</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   ko.bindingHandlers.koDecoChange = {
  11.     update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
  12.       var value = valueAccessor();  // 今回の場合だと、self.viewTxtが入る。
  13.       var self  = viewModel;      // viewModel()内の関数群
  14.       
  15.       var valueUnwrapped = ko.utils.unwrapObservable(value);  // self.viewTxt()を入れる
  16.       
  17.       var repText = valueUnwrapped;
  18.       if (self.search() == "") {
  19.       }
  20.       else {
  21.         var strSearch = new RegExp("(" + self.search() + ")", "gi");
  22.         var strReplac = '<b style="background:#ffe0ff;">' + "$1" + "</b>";
  23.         repText = valueUnwrapped.replace(strSearch, strReplac);
  24.       }
  25.       
  26.       element.innerHTML = repText;
  27.     }
  28.   };
  29.   
  30.   function viewModel() {
  31.     var self = this;
  32.     
  33.     self.viewTxt = ko.observable("丸ごとシマウマ");
  34.     self.search = ko.observable("シマウマ");
  35.     
  36.   }
  37.   
  38.   $(document).ready(function () {
  39.     ko.applyBindings(new viewModel());
  40.   });
  41. </script>
  43. <style type="text/css">
  44.   .ko001 {
  45.     padding:20px 10px;
  46.   }
  47.   .ko001 h2{
  48.     margin:0;
  49.   }
  50.   .ko001 .ko001A{
  51.     background-color:#f6f6f6;
  52.     border:1px solid #ccc;
  53.     padding:20px 10px;
  54.     margin-top:10px;
  55.   }
  56.   .ko001 p{
  57.     margin:10px 0 0;
  58.   }
  59. </style>
  61. </head>
  62. <body>
  63. <h1>特定の文字を装飾したい2 - カスタムバインディングを使う</h1>
  65. <div class="ko001">
  66.   <h2>「<span data-bind="text: viewTxt"></span>」の「<span data-bind="text: search"></span>」を装飾して表示</h2>
  67.   <div data-bind="koDecoChange: viewTxt" class="ko001A"></div>
  68.   <p>※使用用途としては、検索結果から検索した文字列を強調表示したいとか。</p>
  69. </div>
  71. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  72. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  73. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  74. </div>
  76. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  77. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  78. </div>
  80. </body>
  81. </html>