挖空模板和绑定到视图模型

Question

我在尝试使用挖空模板时遇到了一些问题。

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

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

我创建了一个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

select 模板

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

2 个问题。

为什么我从下拉列表中 select 找不到模板？
我如何绑定模板使其拥有自己的模型以允许我保存属性。

更新

感谢乔治在下面的回答，我的模板绑定工作正常。原来你不能在不调用

的情况下使用 int 作为模板的 ID

我更新了模型

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

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

可能是因为没有睡觉，但我无法让它工作。控制台告诉我 "something is not defined"

当然我的命名不好。我还更新了 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 绑定。

挖空模板和绑定到视图模型

Knockout templates and binding to view models

javascript

knockout.js