3

私のアプリケーションには、ブロックと呼ばれるアイテムがあり、他のブロックアイテムを含むことができます。簡単にするために、これらのブロックを無限にネストできるとしましょう。

ネストされたブロックに対応する再帰ビューを作成できるかどうかを知りたいです。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 内でレンダリングされます。

少し前に同様の質問があったことに気付きましたが、その回答に満足していません。Ember でこれを実現するには、エレガントな方法が必要だと思います。

Ember でこれを行う方法の例を教えてください。そうでない場合は、進歩を遂げて質問を改善するのに役立つアドバイスも大歓迎です。

編集:これは、出発点として使用できるいくつかの初期データで作成した jsFiddleです。あなたの助けを借りて、 is_inside関係DIVsに基づいてネストされたものを作成できることを願っています。この単純な例を使用するように投稿を更新しました。

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ループを使用してビューを作成します。再帰にハンドルバー ヘルパーを使用するのは良い考えではないと思います。

編集されたセクション これよりも良い方法があるかもしれません...しかし、これをチェックしてください。ここでは、ネストを1つのレベルに制限していませんよね?

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 に答える