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

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>，而后者又定义第三个turn。

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>

从那里，发送级模板可以嵌套从附加属性驱动的附加模板。