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

Knockout templates and binding to view models

本文关键字：视图 模型 绑定      更新时间：2023-09-26

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

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

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

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

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

错误：无法处理绑定"foreach：函数 （）{返回联系人 }" 消息：无法处理绑定"模板：函数 （）{返回 { 名称：联系人类型ID} }" 消息：未知模板类型：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. 我将如何绑定模板以拥有自己的模型以允许我保存属性。

更新

感谢下面的乔治回答，我有模板绑定工作。事实证明，如果不调用

我已经更新了我的模型

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

这可能是由于没有睡眠，但我无法让它工作。控制台告诉我"有些东西没有定义"

当然，我的命名不好。我还更新了小提琴

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

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

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

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

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

所以你做你的模板绑定 template： {name： contactTypeTemplateName（）， data： contactTypeTemplateModel（） }

哪里

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

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

相关文章：