Question

我有需要呈现为不同表单元素的属性列表，具体取决于他们的FieldControlId：

<script type="text/html" id="elc-field">
<div class="grid_8">
    <span data-bind="text: FieldDisplayName"></span>
</div>
<div data-bind="if: FieldControlId == 1 " class="grid_8">
    <input type="text" data-bind="value: FieldValue , attr: { 'id': FieldId  }" />
</div>
 <div data-bind="if: FieldControlId == 2 " class="grid_8">
     <input data-bind="value: FieldValue , numeric: number , attr: { 'id': FieldId  }" />
</div>
<div data-bind="if: FieldControlId == 3 " class="grid_8">
    <select data-bind="combobox:FieldValue , attr: { 'id': FieldId }"></select>
</div>
<div data-bind="if: FieldControlId == 4 " class="grid_8">
    <input class="dt" data-bind="attr: { 'id': FieldId } ,  value: FieldValue, datepicker:true" />
</div>

<div class="clear"></div>

但是，我希望某些控件还依赖于其他属性的选定值。例如，<select>定义第二个<select>的内容，后者又定义第三个{。}}。

Answer 1

您可以创建模型的计算属性，以确定您的模板。如：

var model = function(){
    var self = this;

    self.NeedsSpecialTemplate = ko.observable(true);

    self.SpecialText = ko.observable('Special Text');

    self.Template = ko.computed(function(){
        if(self.NeedsSpecialTemplate()){
            return 'special-template'
        }
        return 'normal-template'
    })
}

然后在你的标记中使用：

<div data-bind="template:{ name: Template() }"></div>

和模板示例：

<script type="text/html" id="normal-template">
    <div>Normal Stuff</div>
</script>

<script type="text/html" id="special-template">
    <div>Special Stuff</div>
    <div data-bind="text: SpecialText"></div>
</script>

从那里发送级别模板可以嵌套由其他属性驱动的其他模板。

如何使用knockoutjs模板绑定绑定依赖模板？

1 个答案: