Question

我正忙着为中型项目创建模板。我使用joutery模板引擎的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 } }" />

这是子模板之一，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属性，但不幸的是，这不起作用。还有另一种方法吗？

Answer 1

您可以做的一件事是在绑定中使用$data.readOnly，因为如果readOnly未定义，它将不会出错，因为您正在从对象访问它。

这里将对此进行更详细的描述：knockout viewmodel property undefined

这是您更新的小提琴：http://jsfiddle.net/ZRjWz/2/

是否可以在模板绑定中添加可选的绑定参数？

1 个答案: