如何在Ember中构建递归视图？ [英] How can I build a recursive view in Ember?

问题描述

在我的应用程序中，我有一个名为块的项目，可以包含其他块项目。为了保持简单，让我们说这些块可以无限嵌套。

In my application I have an item called block which can contain and be contained by other block items. To keep things simple, lets say these blocks can be infinitely nested.

我想知道我是否可以创建与嵌套的块对应的递归视图。每个视图将呈现为一个 DIV ，其中包含其子节点并居于其父 DIV ？

I want to know if I can create recursive views corresponding to the blocks that are also nested. Each view will be rendered as a DIV containing its children and residing inside its parent DIV?

虽然视图与可包含的内容相似，但是从服务器获取的实际内容可能不同。以下是一个示例数据：

While the views are similar in terms of what they can contain, their actual content that will be obtained from the server can be different. Here is an example data:

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是根，这意味着不在里面任何其他块）。第二块将在第一个块内呈现，等等。

In this example, block one would be rendered as root (assume 0 is root which means not inside any other block). Block two would be rendered inside block one and so on.

我注意到一个类似的问题已经被问了一段时间，但我对这里的答案不满意。我觉得在Ember中必须有一个优雅的方式来实现这一点。

I noticed a similar question has been asked a while ago, but I am not satisfied with the answer there. I feel there must be an elegant way to achieve this in Ember.

你能指出一个例子，说明如何在Ember中做到这一点吗？如果没有，任何可以帮助我进步和改进我的问题的建议也将非常感谢。

Can you point me to an example of how this can be done in Ember? If not, any advice that could help me make progress and refine my question would also be very appreciated.

编辑：这里是一个jsFiddle ，我用一些初始数据作为起点。有了你的帮助，希望我可以根据他们的 is_inside 关系来嵌套这些 DIVs 。我已经更新了这个更简单的例子。

Here is a jsFiddle that I made with some initial data that we could use as starting point. With your help hopefully I can make those DIVs nested based on their is_inside relation. I have updated the post to use this simpler example.

推荐答案

以此作为提示认为属性 Ember.View 的布局拯救...它以这种方式工作

Take this as a hint, I think the layout property of Ember.Viewcomes in rescue...It works this way

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>

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

Model your data first, then use for or while loops in js to create views, I don't think using handlebar helpers for recursion is a good idea.

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

Edited Section There can be a better way than this...but check this out, and here you are not limiting the nesting to one level, right ?

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

这篇关于如何在Ember中构建递归视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！