淘汰模板和绑定到视图模型

Question

我在尝试让淘汰赛模板工作时遇到了一些麻烦。

我想使用一个选择列表，该列表允许人们选择一个值，该值依次显示模板。

模板需要有自己的视图模型属性，每个属性都不同。

我创建了一个jsfiddle 来展示整个事情

我有 2 个非常基本的模板，但是当我尝试运行该页面时出现错误。该代码不是生产代码，它简单的丢弃的东西，所以命名约定并不完美:)

错误：无法处理绑定“foreach: function (){return contacts }”消息：无法处理绑定“template: function (){return { name:contactTypeId} }”消息：未知模板类型：1

模板确实存在

<script type="text/html" id="1">
    <span> Family Template </span>
    <input placeholder="From Mum or Dads side"/>
</script>
<script type="text/html" id="2">
    <span> Friend Template </span>
    <input placeholder="Where did you meet your friend"/>
</script>

我正在尝试通过选择来选择模板

<select class="form-control" data-bind="options: $root.contactTypes,
                            optionsText: 'type',
                            optionsValue:'id',
                            value:contactTypeId,
                            optionsCaption: 'Please Select...'"></select>

2 个问题。

1. 为什么我从下拉列表中选择模板时找不到模板？
2. 如何将模板绑定到拥有自己的模型以允许我保存属性。

更新

感谢 Georges 下面的回答，我的模板绑定工作正常。事实证明，如果不调用，就不能将 int 用作模板的 ID

我已经更新了我的模型

  self.contactTypeTemplateModel = ko.computed(function () {
         return self.contactTypeId === 2 ? someModelWithWhereDidYouMeet : someOtherModel
    });

    var someModelWithWhereDidYouMeet = {something:ko.observable()};
    var someOtherModel = {something:ko.observable()};

这可能是因为没有睡觉，但我无法让它工作。控制台告诉我“有些东西没有定义”

当然我的命名不好。我还更新了fiddle

Answer 1

问题 #1 的问题似乎是您传入了一个需要字符串的数字。无论出于何种原因，它都不会被自动强制执行。这样就解决了。

 template: { name: contactTypeId().toString() }

更好的是，创建一个计算并添加一个合理的前缀。

 templateName = ko.computed(function() { return "contact-type-" + contactTypeId() })

至于传入不同的模型。 template 绑定支持 data 属性。您的数据属性也可以基于contactTypeId 计算得出。

所以你做你的模板绑定 模板：{名称：contactTypeTemplateName()，数据：contactTypeTemplateModel()}

Where

 self.contactTypeTemplateModel = ko.computed(function() { 
  return self.contactTypeId() === 2 ? someModelWithWhereDidYouMeet 
                                    : someOtherModel })

我还应该提到，除非您在很多地方相互独立地重复使用这些模板，否则我不会为此推荐模板。我只会使用if 绑定。