如何實現圖形編輯視圖中EmberJS

我是一個Rails開發和新EmberJS請問實現用戶界面的幫助不大，因爲它在JavaScript代碼中的沉重，我想嘗試灰燼如何實現圖形編輯視圖中EmberJS

這裏是我要完成

enter image description here

當我點擊它增加了一個新的演員和展示了新演員酥料餅的形式GraphEditor

的事情是，UI元素與SVG標籤，以是由zoomable，p annable之類的東西

我的問題是

哪些控制器跟蹤演員和關係？如何從SocialNetwork顯示視圖調用它們？
如何渲染Actor和Relations視圖？ {{render}}不能工作多次，我需要綁定視圖屬性與模型屬性（渲染部分類型：'actor'，actor：actor）
如何創建Actor/Relation Details Popover視圖？
如何構建視圖層次結構以完成此操作？我的建議是擁有這個嵌套的視圖層次結構。

enter image description here

很抱歉的一般性問題，但我在灰燼實現這一點，因爲它綁定到數據的複雜看法，我不知道如何實現這一點。任何初步的見解將是有用的

來源

2013-04-16 fespinozacast

哪些控制器跟蹤演員和關係？

可能是你ActorsController將陣列控制器與演員的名單，而名單將在SocialNetwork航線的setupController鉤來填充。可以爲關係做同樣的事情，也可以通過參與者訪問，這取決於模型數據的結構。

如何從SocialNetwork顯示視圖調用它們？

添加needs: ['actors'] to SocialNetworkController so that the property controllers.actors`將可用。

如何渲染Actor和Relations視圖？

使用{{each}}幫手遍歷演員/關係的列表，讓每個演員裹着ActorController

{{#each actor in controllers.actors itemController="actor"}} 
    {{actor.name}} {{#if actor.isAwesome}}***AWESOME****{{/if}} 
{{/each}}

如何創建的演員/關係實例指定itemController財產詳情Popover視圖？

假裝它不是彈出窗口，讓它工作，以便細節顯示在某個div中，就好像您在進行正常的主/細節視圖一樣。然後，一旦它工作，自定義詳細視圖的didInsertElement fx，以便它顯示在彈出窗口中。

如何構建視圖層次結構以完成此操作？

有很多方法可以做到這一點，這裏有一個（未經測試的）草圖。我假設GraphEditorView將會處理SVG的東西 - 否則那個視圖並不是真的需要。

<!-- social_network.hbs --> 
<h3>Network Name: {{name}}</h3> 
{{view "App.GraphEditorView"}} 

<!-- graph_editor.hbs --> 
<h3>Network Name: {{name}}</h3> 
{{#each actor in controllers.actors itemController="actor"}} 
    <g class="actor" {{action showDetails}}> 
    <circle></circle> 
    <text>{{actor.name}}</text> 
    </g> 
    {{#if actor.isShowingDetails}} 
    {{render actorDetails actor}} 
    {{/if}} 
{{/each}}

很抱歉的一般性問題，但我在灰燼實現這一點，因爲它綁定到數據的複雜看法，我不知道如何實現這一點。任何初步的見解將是有益的

不用擔心。也許看到這個相關的帖子，也許它可能有助於看到這些概念如何適用於其他人的應用程序：ember.js displaying list of items, each item with it's own view/controller

來源

2013-04-16 16:51:49

非常感謝您的時間和迴應！ – fespinozacast

我已更新顯示整個呈現頁面的視圖層次結構提議的問題的內容 – fespinozacast

建議是有意義的。似乎你已經掌握了它，所以不清楚你在問什麼：「構建視圖層次結構」，用最佳猜測更新我的答案...... –

如何實現圖形編輯視圖中EmberJS

回答

相關問題