3

在我的应用程序中，我有一个名为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 是根，这意味着不在任何其他块内）。块二将在块一内呈现，依此类推。

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

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

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

4

1 回答 1

0

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

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 中使用fororwhile循环来创建视图，我认为使用把手帮助器进行递归不是一个好主意。

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

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'))
})
于 2012-09-26T13:22:05.863 回答