0

私のノックアウト形式では、次のように多くのコードが重複しています。

<div data-bind="if:Id == 0">
My form field : <input type="text" name="MyFormField" data-bind="value:MyFormField />
</div>
<div data-bind="if:Id != 0">
My form field consultable : <span data-bind="text:MyFormField"></span>
</div>

ご覧のとおり、Id = 0 の場合は入力を表示します。相談のためだけの場合は単純なスパンを表示します。

これの汎用テンプレートを作成することは可能ですか? アイデアは次のとおりです。

  1. 表示したいプロパティへの参照を使用してテンプレートを呼び出します
  2. Id == 0 の場合、テンプレートは入力をレンダリングし、代わりにテンプレートはスパンをレンダリングします

よろしくお願いします！

4

1 に答える 1

2

ドキュメントの注 5 を見ると、セクションに使用するテンプレートを動的に選択できます。あなたの場合、それは次のようになります：

<ul data-bind='template: { name: templateName }'> </ul>

次に、計算されたプロパティをビュー モデルに追加します。

templateName = ko.computed(function()
{
    return Id() === 0 ? 'inputTemplate' : 'spanTemplate';
});

次に、計算された 2 つの名前付けオプションと同じ名前の 2 つのテンプレートを作成します。

<script type="text/html" id="inputTemplate">
    <input type="text" data-bind="text: name" />
</script>

<script type="text/html" id="spanTemplate">
    <span data-bind="text: name" />
</script>
于 2013-04-15T11:51:32.067 に答える