2

動的に (たとえば、ajax 呼び出しを介して) 読み込まれるモデルをレンダリングしようとしています。そのプロパティは、その型に基づいて識別されます。

特定のタイプのオブジェクトをレンダリングするのに適したテンプレートがいくつかあり、バインディングifのパラメーターを使用して、オブジェクト タイプに基づいて特定のテンプレートをインスタンス化します。ドキュメントtemplateで述べたように：

これは、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());

関連する jsfiddleで試すことができます。

4

1 に答える 1

0

これはベスト プラクティス ソリューションではないかもしれませんが、実装は非常に簡単です: http://jsfiddle.net/hmcKN/9/

objType他の値を変更する前に、存在しないテンプレートに設定するだけです。次に、必要なオブザーバブルをすべて設定し、最後に正しいテンプレートを指定します。

于 2013-01-14T14:57:02.220 に答える