「knockout.jsでDOMから値を取得」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

knockout.jsでDOMから値を取得

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>knockout.jsでDOMから値を取得</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. <style type="text/css">
  10. td, th{
  11.   border:1px solid #ccc;
  12. }
  13. </style>
  16. <script type="text/javascript">
  17.   $(document).ready(function () {
  18.     ko.applyBindings(new ViewModel());
  19.   });
  21.   function ViewModel() {
  22.     var self = this;
  24.     self.jsonTemporary = {};
  25.     self.jsonData = ko.observable();
  27.     self.tempTaste = ko.observable();
  28.     this.viewTaste = ko.computed( function()
  29.     {
  30.       return self.tempTaste();
  31.     }, this);
  33.     // 表示
  34.     self.GotoView = function(json) {
  35.       this.jsonData(json);
  36.     };
  38.     // 登録
  39.     self.entryTaste = function(data, event) {
  40.       htmlDom = event.target;
  41.       this.taste = $(htmlDom).parents("tr").find(".span")[0].innerText;
  42.       self.tempTaste(this.taste);
  43.     };
  45.     // 削除
  46.     self.deleteTaste = function(data, event) {
  47.       htmlDom = event.target;
  48.       this.taste = "";
  49.       self.tempTaste(this.taste);
  50.     };
  52.     // デフォルトでの表示：元データを読込んでおく
  53.     $.getJSON("./testdata/testdataA.txt", {}, function(json){
  54.       json["taste"] = "";
  55.       
  56.       self.jsonTemporary = json; // 何回も読込みされるのがイヤなので保管しておく
  57.       self.GotoView(self.jsonTemporary);
  58.     });
  60.   }
  62. </script>
  64. </head>
  65. <body>
  66. <h1>knockout.jsでDOMから値を取得</h1>
  68. <div>
  69.   <table data-bind="visible: jsonData()">
  70.     <thead><tr><th>品名</th><th>金額</th><th>味</th><th>ボタン</th></thead>
  71.     <tbody data-bind="with: jsonData">
  72.       <tr>
  73.         <td data-bind="text: name"></td>
  74.         <td data-bind="text: price"></td>
  75.         <td data-bind="text: $root.viewTaste"></td>
  76.         <td>
  77.           <span class="span">味噌</span>
  78.           <button data-bind="click: $root.entryTaste">確定</button>
  79.           <button data-bind="click: $root.deleteTaste">削除</button>
  80.         </td>
  81.       </tr>
  82.     </tbody>
  83.   </table>
  84. </div>
  86. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  87. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  88. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  89. </div>
  91. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  92. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  93. </div>
  95. </body>
  96. </html>