KnockoutJS-HTMLバインディング

HTMLバインディングにより、関連付けられたDOM要素に、パラメーターで指定されたHTMLが表示されます。これは、HTMLマークアップを動的に生成する場合に非常に便利です。

構文

html: <binding-value>

パラメーター

KnockoutJSは、DOM要素のコンテンツを提供されたパラメーター値に設定します。この機能はJQueryでも使用できます。 JQueryが利用できない場合、KOを使用してこれを達成します。
パラメーターが observable の場合、要素の値は、基になる observable が変更されると更新されます。 no observable が使用されている場合、要素は1回だけ処理されます。

例

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

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

   <body>
      <p><span data-bind="html: welcomeMessgae "></span></p>

      <script>
         function AppViewModel() {
            this.welcomeMessgae = ko.observable();
            this.welcomeMessgae ("<strong>Welcome to finddevguides !!! For free online tutorials and courses click <a href = 'https://finddevguides.com/'>here</a>.</strong>");
         }

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

   </body>
</html>

出力

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

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

Knockoutjs-html-binding

目次

KnockoutJS-HTMLバインディング

構文

パラメーター

例

出力