2
我想呈現一個動態加載的模型（例如，通過ajax調用），並根據其類型識別其屬性。呈現動態模型
我有幾個模板，每個模板都適合渲染特定類型的對象，並使用if參數template綁定實例化基於對象類型的特定模板。如在documentation中所述：
這可以用於防止null觀察值在填充之前與模板綁定。
在第一次加載時，模型已成功呈現。當我嘗試渲染不同的對象時，我得到了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>
和視圖模型：
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嘗試。