Question

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

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

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

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

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

更新

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

我更新了我的模型

  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计算。

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

Where

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

我还应该提一下，除非你在很多地方相互独立地重复使用这些模板，否则我不建议使用模板。我只想使用if绑定。

敲除模板并绑定到视图模型

1 个答案: