Question

我与KnockoutJS一起工作了几天，但有两个问题。

选择“选择”时如何在“字段表单”块中插入两个模板之一？
- 如果“文本0”，则选择“文本1”-框架模板“占位符”。
- 如果选择了“文本2”，“文本3”或“文本4”-框架模板“ fieldListQuestions”。
- 如果选择了“选择...”，则不显示任何内容。
与页面加载一样，最初显示一个“字段表单”块。而且无法删除。

这是两个模板：

  <script id="placeholder" type="text/html">
    <input type="text" name="placeholder" placeholder="text">
  </script>
  <script id="fieldListQuestions" type="text/html">
    <textarea name="fieldListQuestions" placeholder="textarea"></textarea>
  </script>

Answer 1

您可以将函数传递给name绑定的template属性。在此功能内，您可以检查选择的值以选择模板名称。这是一个示例：

function QuestionViewModel() {
  var self = this;

  this.options = ko.observableArray([
    { value: '0', text: 'Text 1' },
    { value: '1', text: 'Text 2' },
    { value: '2', text: 'Text 3' },
    { value: '3', text: 'Text 4' },
    { value: '4', text: 'Text 5' }
  ]);
  
  this.selected = ko.observable(null);
  
  this.template = function() {
    switch (self.selected()) {
      case "0":
      case "1":
        return "template1";
      case "2":
      case "3":
      case "4":
        return "template2";
      case null:
      default:
        return "empty"
    }
  }
}

ko.applyBindings(new QuestionViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="
  options: options,
  value: selected,
  optionsValue: 'value',
  optionsText: 'text',
  optionsCaption: 'Select...'
"></select>

<div data-bind="template: { name: template, data: $data }"></div>

<script type="text/html" id="template1">
  <div style="background: red">Template 1</div>
</script>

<script type="text/html" id="template2">
  <div style="background: green">Template 2</div>
</script>

<script type="text/html" id="empty">
  <div style="background: blue">empty</div>
</script>

问题2：您可以使用单个Field实例预填充表单数组。在模板中，您可以通过检查父数组的长度来隐藏“删除字段”按钮：data-bind="visible: $parent.BlockWorkingFieldForm().length > 1"

如何将“选择”与KnockoutJS中的不同模板链接？

1 个答案: