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

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

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