2

目標

HTML を使用して DOM 文字列に渡し、レンダリングします。

シナリオ

次の構文を使用して、(KnockoutJS を使用して) オブザーバブルのプロパティを拡張しています。

self.showDetails.subscribe(function (context) {
    var details = this.showDetails();
    details.nameWithCnpj = context.name() + " <small>" + context.cnpj() + "</small>";
}, this);

次の行に注目すると、その上に HTML が表示されます。

details.nameWithCnpj = context.name() + " <small>" + context.cnpj() + "</small>";

タグが HTML に到着すると、<small></small>通常の HTML ではなく文字列としてレンダリングされます。

nameWithCnpj(KnockoutJS を使用して) を格納するコンテナーは次のとおりです。

<h2 class="bold float-left" data-bind="text: nameWithCnpj"></h2>

だから私は尋ねます：変数が単純な文字列ではなくDOM要素であるべきであることをJavaScript（またはHTML）に教えるにはどうすればよいですか？nameWithCnpj

4

1 に答える 1

5

次の代わりにhtmlバインディングを使用する必要がありますtext。

html バインディングにより、関連付けられた DOM 要素に、パラメーターで指定された HTML が表示されます。

これは通常、ビュー モデルの値が実際にレンダリングする HTML マークアップの文字列である場合に役立ちます。

ビューを次のように変更します。

<h2 class="bold float-left" data-bind="html: nameWithCnpj"></h2>

より MVVM になりたい場合は、フォーマット ロジックをカプセル化するテンプレートを作成し、 templateバインディングを使用できます。

<h2 class="bold float-left" 
    data-bind="template: { name: 'nameWithCnpj', data: showDetails}"></h2>

<script id="nameWithCnpj" type="text/html">
   <span data-bind="text: name"></span>
   <small data-bind="text: cpnj"></small>
</script>
于 2013-08-29T13:04:33.763 に答える