4

最新の meteor バージョンを使用しています。これはローカル展開です。子ノードが属性として親ノード ID を持つツリー構造を含むコレクション (フォルダー) があります。ツリーを UI ツリー ウィジェットに表示したいと思います。再帰テンプレートのトピックを調べましたが、子ノードを表示するのに苦労しています。関連するテンプレートとコードは次のとおりです。

<template name="sideTreeTemplate">
  <div id="tree" style="height: 200px">
    <h2 class="panel">My Data</h2>
    <ul id="treeData" style="display: none;">
      {{#each treeItems }}
        {{> treeNodeTemplate}}
      {{/each }}
    </ul>
  </div>
</template>


<template name="treeNodeTemplate" >
  <li id="{{id}}" title="{{name}}" class="{{type}}">
    {{name}}
    {{#if hasChildren}}
      <ul>
        {{#each children}}
          {{> treeNodeTemplate}}
        {{/each}}
      </ul>
    {{/if}}
  </li>
</template>

client.js コード:

Template.sideTreeTemplate.treeItems = function() {

  var items = Folders.find({"parent" : null});
  console.log("treeItems length=" + items.count());
  items.forEach(function(item){
    item.newAtt = "Item";
    getChildren(item);
  }); 
  return items;

};


var getChildren = function(parent) {
  console.log("sidetree.getChildren called");
  var items = Folders.find({"parent" : parent._id});
  if (items.count() > 0) {
    parent.hasChildren = true;
    parent.children = items;
    console.log(
        "children count for folder " + parent.name +
        "=" + items.count() + ",
        hasChildren=" + parent.hasChildren
    );
    items.forEach(function(item) {
      getChildren(item);
    });
  }
};

ツリーの最上位は正常に表示され、リアクティブですが、子をgetChildren持つノードに対して関数が呼び出されても、子は表示されません。私の疑いでは、サーバーの同期によって、各ノードに動的に追加されたプロパティ (つまり ) が実際に削除されたのではないかと考えられhasChildrenますchildren。この場合、どうすればリアクティブ ツリーを機能させることができますか? それとも、私の実装に何か問題があるのでしょうか?

助けてくれてありがとう。

4

1 に答える 1

7

簡単な方法は、子オブジェクトを親オブジェクトのプロパティとして追加しないことです。代わりに、ヘルパーを使用します。

Template.treeNodeTemplate.hasChildren = function() {
  return Folders.find({parent: this._id}).count() > 0;
};

Template.treeNodeTemplate.children = function() {
  return Folders.find({parent: this._id});
};
于 2013-08-14T07:42:43.383 に答える