我在试图让淘汰模板工作时遇到了一些麻烦。
我想使用一个选择列表,允许一个人选择一个值来反过来显示模板。
模板需要有自己的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的回答,我有模板绑定工作。事实证明,如果不调用
,就不能使用int作为模板的ID我更新了我的模型
self.contactTypeTemplateModel = ko.computed(function () {
return self.contactTypeId === 2 ? someModelWithWhereDidYouMeet : someOtherModel
});
var someModelWithWhereDidYouMeet = {something:ko.observable()};
var someOtherModel = {something:ko.observable()};
这可能是因为没有睡觉,但我无法让它发挥作用。控制台告诉我“某事未定义”
当然,我的命名并不好。我还更新了fiddle
答案 0 :(得分:1)
问题#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
绑定。