3

中規模のプロジェクトのテンプレートを作成するのに忙しいです。jqueryテンプレートエンジンでknockoutjsを使用していますが、すべてうまくいっています。いくつかのテンプレートを数レベル深くネストしています。次に、いくつかのテンプレートにオプションのバインディングパラメータを追加したいと思います。これは、htmlテーブル内のルートテンプレートへのバインドです。

<tr data-bind="template: { name: 'RowTextboxTemplate', data: { caption: 'Transporter', property: Transporter } }" />

これはrowtextboxtemplateテンプレートです。

<td data-bind="template: { name: 'CellLabelTemplate', data: { caption: caption, property: property } }" />
<td data-bind="template: { name: 'TextboxTemplate', data: { field: property } }" />

そして、これはサブテンプレートの1つであるtextboxtemplateです。

<input data-bind="value: field, valueUpdate: 'afterkeydown'" type="text">

今、私はこれをしたいと思います：

<tr data-bind="template: { name: 'RowTextboxTemplate', data: { caption: 'Transporter', property: Transporter, readOnly: IsTransporterReadOnly } }" />

ただし、オプションにしたいので、最後のプロパティを省略しても機能します。これが必要な理由は、このパラメーターを必要としないフィールドがたくさんあるため、HTMLが汚染されるためです。ルートテンプレートでこれを試しました：

    <td data-bind="template: { name: 'CellLabelTemplate', data: { caption: caption, property: property } }" />
{{if readOnly !== undefined}}
 <td data-bind="template: { name: 'CellComboboxTemplate', data: { options: property, selectedValue: selectedValue, optionsText: optionsText, readOnly: readOnly } }" />
{{else}}
 <td data-bind="template: { name: 'CellComboboxTemplate', data: { options: property, selectedValue: selectedValue, optionsText: optionsText, readOnly: false } }" />
{{/if}}

次に、readonlyプロパティを子テンプレートのreadonly属性にバインドしましたが、残念ながらこれは機能しません。これを行う別の方法はありますか？

4

1 に答える 1

3

$data.readOnlyオブジェクトからアクセスしているためにreadOnlyが未定義の場合でもエラーが発生しないため、バインディングで使用することができます。

これについては、ここでもう少し詳しく説明します：ノックアウトviewmodelプロパティundefined

更新されたフィドルは次のとおりです：http：//jsfiddle.net/ZRjWz/2/

于 2012-09-28T12:05:20.163 に答える