0

我是一名 Rails 开发人员，并且是 EmberJS 的新手，我需要一些帮助来实现 UI，因为它在 javascript 代码中很重，我想尝试 Ember

这是我想要完成的

在此处输入图像描述

当我单击 GraphEditor 时，它会添加一个新演员并显示新演员弹出框

问题是 UI 元素是用 SVG 标签制作的，以便可以缩放、平移和类似的东西

我的问题是

  • 哪些控制器跟踪演员和关系？如何从 SocialNetwork 显示视图中调用它们？
  • 如何渲染 Actors 和 Relations 视图？{{render}} 不能多次工作，我需要将视图属性与模型属性绑定（渲染部分类型：'演员'，演员：演员）
  • 如何创建 Actor/Relation Details Popover 视图？
  • 您如何构建视图层次结构以实现此目的？我的建议是拥有这种嵌套视图层次结构。

在此处输入图像描述

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

4

1 回答 1

1

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

可能您ActorsController将是一个带有演员列表的数组控制器，并且该列表将填充到SocialNetwork路由的setupController钩子中。可以对关系做同样的事情，或者它们可以通过参与者访问，这取决于你的模型数据的结构。

如何从 SocialNetwork 显示视图中调用它们？

添加needs: ['actors'] toSocialNetworkController so that the propertycontrollers.actors` 将可用。

如何渲染 Actors 和 Relations 视图？

使用{{each}}helper 来遍历参与者/关系列表，并指定 itemController 属性，以便将每个参与者包装在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 显示项目列表，每个项目都有自己的视图/控制器

于 2013-04-16T16:51:49.300 回答