如何在EmberJS中实现Graph Edition View

Question

我是Rails开发人员，并且是EmberJS的新手，我希望为实现UI提供一些帮助，因为它的JavaScript代码繁重，我想尝试Ember

这就是我要完成的

当我单击GraphEditor时，它将添加一个新的Actor并显示新的Actor弹出框

问题是，UI元素由SVG标签制成，以便可缩放，可平移等

我的问题是

• 哪些控制者跟踪演员和关系？ 如何从SocialNetwork show视图调用它们？
• 如何渲染演员和关系视图？ {{render}}无法多次使用，我需要将视图属性与模型属性绑定（某种类型的render部分：“ actor”，actor：actor）
• 如何创建Actor / Relation Details Popover视图？
• 您如何构造视图层次结构以实现此目的？ 我的主张是拥有此嵌套视图层次结构。

抱歉，我在Ember中实现了这个一般问题，因为它是绑定到数据的复杂视图，我不知道如何实现。 任何初步见解都会有用

Answer 1

哪些控制者跟踪演员和关系？

可能您的ActorsController将是一个具有actor列表的数组控制器，并且该列表将填充在SocialNetwork路由的setupController挂钩中。 可以对关系执行相同的操作，或者可以通过角色访问它们，具体取决于模型数据的结构。

如何从SocialNetwork show视图调用它们？

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

如何渲染演员和关系视图？

使用{{each}}帮助程序来遍历actor / relations的列表，并指定itemController属性，以便将每个actor包裹在ActorController的实例中

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

如何创建Actor / Relation Details 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中实现了这个一般问题，因为它是绑定到数据的复杂视图，我不知道如何实现。 任何初步见解都会有用

别担心。 也许看到这篇相关的文章，也许有助于了解这些概念如何应用于其他人的应用程序： ember.js显示项目列表，每个项目都有自己的视图/控制器