2013-07-10 42 views
3

考虑这个样机我预期的输出:如何用流星模板创建一个类似目录的结构?

Intended structure

在蒙戈DB这背后的数据结构是这样的 - 我没有窝在文档中的子类,因为我还是希望能够更新子文档 - 我也想让下面的动态数量的图层。从我所看到的,Mongo目前不允许对嵌套文档进行简单,动态的访问。

topmost_category = { 
    _id : "foo", 
    category_name : "Example", 
    parent_category: null, 
    subcatories: [ "sub_foo1", "sub_foo2", ... ] 
} 

child_category = { 
    _id = "sub_foo1", 
    category_name : "Example 2", 
    parent_category: "foo", 
    subcategories: [] 
} 

基础HTML仅由嵌套分支组成。当前选择的类别获得“活动”类,并且前面的图标被命名为“图标文件夹关闭”和“图标文件夹打开”(<i class="icon-folder-close"></i>)。

现在,我可以使用this的答案来创建一个完整的树状结构。但是,所有分支都是“开放的”。我该如何做到这一点,只有当前选定的分支是可见的,如我的模型中所示(并且仍然具有启动响应)?

回答

2

你可以看到一个非常类似的方法来通过休伯特这里描述的实现:

http://www.meteorpedia.com/read/Trees

这是代码的(工作)类浏览器的功能维基(你可以在那里看到一个演示)。

Hubert的答案的主要区别在于它使用发布/订阅会话变量来实时获取已打开子项的数据。

+1

是的,这正是我想要的。同时,由于我同时提出了一个休伯特解决方案的变体,我会看看你的提案有什么不同。但你的解决方案正是我想要的。树形结构与可见的兄弟姐妹/儿童的主动路径_反应启动! – Rhywden

1

最简单的方法是为分支添加一个布尔标志来表示它们是否属于当前路径,因此应该打开。

 

<template name="branch"> 

    {{#if open}} 
     <div class="openBranch"> 
      ... 
      {{#each children}} 
       ... 
      {{/each 
     </div> 
    {{else}} 
     <div class="closedBranch"> 
      ... 
     </div> 
    {{/if}} 

</template> 

 

现在,这个标志的设置和管理依赖于应用程序的逻辑。你在哪里存储当前选择的分支?

 

我假定状态被限制为单个客户端。在这种情况下,一种解决方案是:

  • 保持打开支路ID数组,作用域为单个文件,
  • 实施open标志作为辅助:

 

Template.branch.open = function() { 
    return _.indexOf(openedBranches, this._id) !== -1; 
} 

 

  • 当用户更改选择时,清除该数组并使用从所选分支到顶部的路径填充数组。

 

+0

看起来不错。将在今天晚些时候尝试并回复你。 – Rhywden

+0

实际上是否使用了您的想法的变体,详细如下 – Rhywden

相关问题