KnockoutJS-バインディングあり

このバインディングは、指定されたオブジェクトのコンテキストでオブジェクトの子要素をバインドするために使用されます。このバインディングは、ifやforeachなどの他のタイプのバインディングとネストすることもできます。

構文

with: <binding-object>

パラメーター

子要素をパラメーターとしてバインドするためのコンテキストとして使用するオブジェクトを渡します。渡されたオブジェクトまたは式がnullまたは未定義であると評価された場合、子要素は表示されません。
指定されたパラメーターが観察可能なパラメーターである場合、式は再評価されます。同様に、子要素は、更新されたコンテキスト結果に基づいて再処理されます。

例

withバインディングの使用を示す次の例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS with binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h1 data-bind = "text: siteName"> </h1>

      <table border = "1">
         <thead>
            <th>Course Name</th><th>Fees</th><th> Start Date</th>
         </thead>

         <tbody data-bind = "with: courses ">
            <tr>
               <td><span data-bind = "text: courseName"></span></td>
               <td><span data-bind = "text: Fees"></span></td>
               <td><span data-bind = "text: startDate"> </span></td>
            </tr>
         </tbody>
      </table>

      <script type="text/javascript">
         function AppViewModel() {
            self = this;
            self.siteName = ko.observable( 'finddevguides');
            self.courses = ko.observable ({
               courseName:  'Microsoft .Net',
               Fees: 20000, startDate: '20-Mar-2016'
            });
         };

         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを with-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。

観察

コンテナレス

DOM要素内にデータバインディングを配置できない場合があります。次のコードに示すように、コメントタグに基づいた*コンテナレス*構文を使用して、基本的なバインディングを実行できます。

<ul>
   <li>Course Info</li>
   <!-- ko with: currentClasses -->
      ...
   <!--/ko -->
   <!-- ko with: plannedClasses -->
      ...
   <!--/ko -->
</ul>

<！-ko→および<！-/ko→は、開始および終了マーカーとして機能し、仮想構文となり、データを実際のコンテナであるかのようにバインドします。

Knockoutjs-with-binding

KnockoutJS-バインディングあり

観察

コンテナレス