KnockoutJS-テキストバインディング

テキストバインディングにより、関連付けられたDOM要素にパラメーターのテキスト値が表示されます。これは、 <span> や <em> などのテキストレベルのDOM要素で使用されます。テキストバインディングは、任意のデータタイプを受け入れ、レンダリングする前に文字列に解析します。

構文

text: <binding-value>

パラメーター

KOは、要素のコンテンツをパラメーター値を使用してテキストノードに設定します。以前のコンテンツはすべて上書きされます。
パラメーターが観測可能な場合、要素の値は、基になるプロパティが変更されるたびに更新されます。それ以外の場合は、最初にのみ割り当てられます。
NumberまたはString以外のものが渡された場合、KOはそれをyourParameter.toString（）と同等のString形式に解析します。
パラメーター値は、JavaScript関数またはテキスト値を返す任意のJavaScript式にすることもできます。

例

テキストバインディングの使用方法を示す次の例を見てみましょう。

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

   <body>
      <p data-bind = "text: hiThere"></p>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Hi finddevguides !!!");
         }

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

   </body>
</html>

出力

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

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

例

Computed Observableを使用してテキストが導出される別の例を見てみましょう。

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

   <body>
      <p>Your full Name is <span data-bind="text: fullName"></span></p>

      <script>
         function AppViewModel() {
            this.firstName= ko.observable("John");
            this.lastName= ko.observable("Smith");

            this.fullName = ko.computed( function() {
               return this.firstName()+" "+this.lastName();
            },this);
         }

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

   </body>
</html>

出力

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

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

観察

HTMLエンコーディング

テキストバインディングはHTMLエンティティをエスケープします。つまり、文字列値を挿入せずに設定できます。たとえば-

viewModel.message("<strong>Hi finddevguides !!!</strong>");

上記のコードは、画面に<strong> Hi finddevguides !!! </strong>と表示するだけです。テキストは太字になりません。

コンテナ要素なしでテキストを使用する

HTML要素を使用して別の要素内にテキストを設定できない場合があります。このような場合、次のように示されるコメントタグで構成される*コンテナなしの構文*を使用することができます-

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

次の例を見てみましょう。

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

   <body>
      <p data-bind="text: hiThere"></p>
      <select data-bind="foreach: items">
         <option> <!--ko text: $data --><!--/ko--></option>
      </select>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Days of week !!!");
            this.items = (['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday',
               'Sunday']);
         }

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

   </body>
</html>

出力

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

上記のコードを text-bind-containerless ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
ここでは、配列から現在のアイテムを表示するために$ dataバインディングコンテキストが使用されていることに注意してください。

Knockoutjs-text-binding

目次

KnockoutJS-テキストバインディング

観察

HTMLエンコーディング

コンテナ要素なしでテキストを使用する