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

在我的应用程序中，我有一个名为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内部渲染，依此类推

我注意到一段时间前有人问了一个问题，但我对那里的答案不满意。我觉得一定有一个优雅的方式来实现这一点在余烬

你能给我举个例子说明如何在余烬中做到这一点吗？如果没有，任何可以帮助我取得进步和完善我的问题的建议也将非常感谢

编辑：这是我用一些初始数据制作的，我们可以用它们作为起点。希望在您的帮助下，我可以根据它们的内部关系嵌套这些

div

。我已经更新了帖子，使用了这个更简单的例子。

作为一个提示，我认为

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>

你介意再加上你到目前为止得到的吗？您的模型对象、视图和把手模板将非常棒。感谢您的及时回复Bradley。我用一个更简单的例子和一个可以作为起点的JSFIDLE编辑了这个问题。请注意，它还没有嵌套，希望您能帮助我使它嵌套：）+1的努力和有益的提示。但是，这里建议的方法不是假设父/子关系只存在一个层次吗？在我的例子中，我不知道数据会嵌套到多个层次。你认为我能按照你的暗示做到吗？如果是，您能提供一个如何在这里捕获递归表示的提示吗？再次感谢@未指定：这是我的想法：是的，我理解你的问题，请参阅答案的编辑部分注意，我说过块可以无限嵌套，我的意思是我不知道我需要多少视图以及它们嵌套了多少层。我只需要动态创建视图。像您提供的静态表示在这种情况下不起作用这是一种逻辑…无论何时或从何处在运行时获取视图，都要将它们推送到数组中&数组必须有一个执行上述定义逻辑的观察者，以便无论何时添加新视图，它都嵌套在其父视图中，当然，也可以达到任何水平
<div id="ember1" class="ember-view">
  Who's your Daddy?
  <div id="ember-2" class="ember-view">
    I'm your son !
  </div>
  ######
</div>

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'))
})