2

我正在尝试渲染一个动态加载的模型（例如，通过 ajax 调用），它的属性是根据它的类型来识别的。

我有几个模板，每个模板都适合呈现特定类型的对象，并使用绑定if参数根据对象类型实例化特定模板。template如文档中所述：

这对于防止在填充模板之前将 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>

和视图模型：

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());

您可以使用相关的 jsfiddle进行尝试。

4

1 回答 1

0

这可能不是最佳实践解决方案，但很容易实现：http: //jsfiddle.net/hmcKN/9/

只需objType在更改其他值之前设置为不存在的模板。然后设置所有需要的可观察对象，最后指定正确的模板。

于 2013-01-14T14:57:02.220 回答