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

这就是我要完成的

在此处输入图片说明

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

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

我的问题是

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

在此处输入图片说明

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

===============>>#1 票数: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显示项目列表,每个项目都有自己的视图/控制器

  ask by fespinozacast translate from so

未解决问题?本站智能推荐:

1回复

开发UI框架-基础实现

我一直在考虑编写自己的UI框架。 这主要是因为我对此有一些相对特定的要求,即与我自己的硬件加速3D图形代码集成。 问题是,我可以从呈现代码中公开的最小基本要素是什么,并且仍然能够呈现一系列控件,例如组合框和下拉列表,等等,这是否还可行? 我只需要相对基本的控件即可,并可以根据需要实施其
3回复

Java实现类创建?

因此,我想制作一个游戏引擎,我立即意识到必须将这些东西“自动导入”。 例如,当您implements Runnable ,您会得到一个错误,因为它必须在类中具有run()方法。 你怎么做到这一点? 在实现时,我将如何拥有一个类,强制一个方法,然后自动运行该方法? 一个示例,在回答
1回复

使用Photoshop创建Android UI-如何实现最终产品?

假设您已经在photoshop中创建了应用的用户界面。 出于这个问题的目的,我将尝试使其简单。 您具有背景色,一些自定义按钮以及其他各种功能。 我的问题是-您如何将最终产品实现到代码中? 您如何将在Photoshop中绘制的内容导出到android代码,您可以在其中链接所有按钮等?
1回复

EmberJS应用程序…可以与UI框架集成吗?

这可能是一个主观的问题,所以我将尝试以一种可接受的方式来构造它。 我是第一次使用emberJS开发应用程序。 到目前为止,我喜欢ember可以做的事情,但是我了解到UI部门仍然缺少它。 为了避免重新发明轮子,我正在考虑使用某些CSS gris和jquery库,或者也许是一个成熟的U
1回复

如何在Ember.js中向DOM添加特定元素?

出于样式目的,我想创建一个div,当另一个div悬停在其上时,该div用作覆盖。 我计划使用自定义事件在一个元素上捕获MouseIn和MouseOut 。 然后在每个其他部分之前创建div以用作覆盖,将它们显示为离焦。 本质上,在我的模板中 那个子视图模板thingie
2回复

如何从Ember.TextField视图内的HTML变量中切换值?

我一直想知道如何在Ember.js中从HTML变量更改值。 我想要做的是单击 编辑按钮时 ,我想更改readonly的值,并使用Ember.TextField视图在文本字段上使其可读。 该代码显示如下: 我避免使用:
1回复

UI数据绑定-是否在ember中逐步完成渲染?

背景 我的很多UI与控制器的模型都是数据绑定的。 我想做一个更改,然后再对数据绑定进行可视更改,而不是一步一步地进行。 就像交易一样,不会导致逐步更新UI。 问题1 UI数据绑定会在setupController中的makin更改时逐步触发吗? 问题2 如
1回复

emberjs:如何在View中触发自定义事件

我想将原始事件(单击)转变为语义事件,例如“ deleteTodo”。 此处对此进行了介绍,但没有介绍如何实现:( 我有以下代码: 执行“单击”后,我看到调用了TodoView click函数,但没有调用IndexRoute中的deleteTodo函数。 有什么建议可能会出什么问题
2回复

如何在EmberJS中显示/隐藏视图

我想在加载时隐藏View,然后当用户点击链接时它将显示视图。 有人可以审查我的代码,让我知道我做错了什么? 这是jsfiddle: http : //jsfiddle.net/stevenng/uxyrw/5/
2回复

如何在EmberJS 1.13.8中呈现视图而不刷新页面?

抱歉,这个问题太幼稚了,但是我对在Ember中渲染视图感到困惑。 我有一条“人”路线。 我可以对它进行CRUD操作。 router.js 控制器/人/ index.js 我现在想做的是,当我想创建一个新的人时,会插入一个表单来创建它。 填写表格后,我希望人员列表视