如何在 Ember 中构建递归视图？

Question

在我的应用程序中，我有一个名为 block 的项目，它可以包含并被其他 block 项目包含。为简单起见，假设这些块可以无限嵌套。

我想知道我是否可以创建对应于嵌套块的递归视图。每个视图都将呈现为 DIV，其中包含其子级并位于其父级 DIV?

虽然视图在可以包含的内容方面相似，但它们将从服务器获取的实际内容可能不同。这是一个示例数据：

App.blocks.set('content',[
    Em.Object.create({title:"One", id:"1", is_inside:"0"}),
    Em.Object.create({title:"Two", id:"2", is_inside:"1"}),
    Em.Object.create({title:"Three", id:"3", is_inside:"0"}),
    Em.Object.create({title:"Four", id:"4", is_inside:"3"}),
    Em.Object.create({title:"Five", id:"5", is_inside:"4"})
])

在本例中，块 1 将呈现为根（假设 0 是根，这意味着不在任何其他块内）。块 2 将在块 1 内呈现，依此类推。

我注意到不久前有人问过similar question，但我对那里的答案不满意。我觉得在 Ember 中必须有一种优雅的方式来实现这一点。

您能否举个例子说明如何在 Ember 中完成此操作？如果没有，任何可以帮助我取得进展和完善我的问题的建议也将不胜感激。

编辑：这是a jsFiddle，我使用一些可以用作起点的初始数据制作。希望在您的帮助下，我可以根据它们的 is_inside 关系使那些 DIVs 嵌套。我已更新帖子以使用这个更简单的示例。

Answer 1

将此作为提示，我认为Ember.View 的layout 属性在救援......它是这样工作的

App.myView =  Ember.View.extend({
  layoutName: "parent",
  templateName: "child"
})

<script type="text/handlebars" data-template-name="parent">
  Who's your Daddy ??<br> {{yield}} <br> ######
</script>


<script type="text/handlebars" data-template-name="child">
  I'm your son !
</script>

会产生下面的html

<div id="ember1" class="ember-view">
  Who's your Daddy?
  <div id="ember-2" class="ember-view">
    I'm your son !
  </div>
  ######
</div>

先对数据建模，然后在 js 中使用 for 或 while 循环来创建视图，我认为使用把手助手进行递归不是一个好主意。

编辑部分 可能有比这更好的方法...但是检查一下，这里您并没有将嵌套限制在一个级别，对吧？

App.MainView = Ember.View.extend({
  templateName: "main"
})

App.View1 = Ember.View.extend({
  id: 1,
  templateName: "view1",
  parentId: "main"
})


App.View2 = Ember.View.extend({
  id: 2,
  templateName: "view2",
  parentId: 1
})


App.View3 = Ember.View.extend({
  id: 3,
  templateName: "view3",
  parentId: 1
})


App.View4 = Ember.View.extend({
  id: 4,
  templateName: "view4",
  parentId: 3
})

App.View5 = Ember.View.extend({
  id: 5,
  templateName: "view5",
  parentId: "main"
})

App.viewArray = [App.View1, App.View2, App.View3, App.View4, App.View5];

App.viewArray.forEach(view, function(){
  parentView = App.viewArray.findProperty("id", view.get('parentId'))
  view.set("layoutName", parentView.get('templateName'))
})