我正在尝试渲染一个动态加载的模型(例如通过ajax调用),并根据其类型识别其属性。
我有几个模板,每个模板都适合渲染特定类型的对象,并使用if
绑定template
参数,根据对象类型实例化特定模板。如documentation中所述:
这可以用于防止null observable在填充之前与模板绑定。
在第一次加载时,模型成功呈现。当我尝试渲染另一个对象时,出现Uncaught Error: Unable to parse bindings. Message: ReferenceError: property is not defined;
错误。
如果模型的一部分是易变的,那么渲染的最佳做法是什么?
以下是示例视图:
<button data-bind="click: loadFruit">Show fruit</button>
<button data-bind="click: loadAnimal">Show animal</button>
<h2>Now showing: <span data-bind="text: objType"></span></h2>
<div data-bind="with: obj">
<dl data-bind="template: { name: 'fruitTemplate', if: $parent.objType() == 'fruit' }"></dl>
<dl data-bind="template: { name: 'animalTemplate', if: $parent.objType() == 'animal' }"></dl>
</div>
<script type="text/html" id="fruitTemplate">
<dt>Name</dt>
<dd data-bind="text: name"></dd>
<dt>Color</dt>
<dd data-bind="text: color"></dd>
</script>
<script type="text/html" id="animalTemplate">
<dt>How may legs?</dt>
<dd data-bind="text: numLegs"></dd>
<dt>Has Tail?</dt>
<dd data-bind="text: hasTail"></dd>
</script>
和viewmodel:
var viewModel = function() {
var self = this;
this.objType = ko.observable('n/a');
this.obj = ko.observable();
this.loadFruit = function() {
self.obj ({name:'apple', color: 'green'});
self.objType ('fruit');
}
this.loadAnimal = function() {
self.obj ({numLegs:4, hasTail: true});
self.objType ('animal');
}
};
ko.applyBindings(new viewModel());
您可以使用associated jsfiddle尝试。
答案 0 :(得分:0)
这可能不是最佳实践解决方案,但很容易实现:http://jsfiddle.net/hmcKN/9/
在更改其他值之前,只需将objType
设置为不存在的模板即可。然后设置所有必需的observable,最后指定正确的模板。