javascript - knockout 模板并绑定(bind)到 View 模型

Question

我在尝试让 knockout 模板正常工作时遇到了一些麻烦。

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

模板需要有自己的 View 模型属性，每个属性之间都不同。

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

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

Error: Unable to process binding "foreach: function (){return contacts }" Message: Unable to process binding "template: function (){return { name:contactTypeId} }" Message: Unknown template type: 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. 如何绑定(bind)模板以拥有自己的模型以允许我保存属性。

更新

感谢下面乔治的回答，我的模板绑定(bind)工作正常了。事实证明，如果不调用

，就无法使用 int 作为模板的 ID

我已经更新了我的模型

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

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

可能是因为没有 sleep ，但我无法让它工作。控制台告诉我“某些内容未定义”

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

Answer 1

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

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

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

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

至于传入不同的模型。 template 绑定(bind)支持 data 属性。您的数据属性也可以根据 contactTypeId 进行计算。

因此，您可以使用以下方式进行模板绑定(bind) 模板:{名称:contactTypeTemplateName()，数据:contactTypeTemplateModel() }

Where

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

我还应该提到，除非您在很多地方独立地重复使用这些模板，否则我不会推荐这样做的模板。我只想使用 if 绑定(bind)。