EmberJS:在相当复杂的应用程序中,模型,存储,控制器和视图之间的关注点分离是否良好?

10

我正在开发一个相当复杂的emberjs应用程序,并将其与API后端进行绑定。

API调用通常不与任何特定模型相关联,但可能在响应的不同部分中返回各种类型的对象,例如,对事件API的调用将返回事件,还会返回媒体资产和参与这些事件的个人。

我刚刚开始这个项目,希望得到一些专家指导,以便将关注点分离,使代码库保持清洁易维护。

我的做法是:

  • Models: 主要处理记录及其字段和其他计算属性。但是,模型不负责发送请求。
    • 例如:Individual、Event、Picture、Post等
  • Stores: 本质上是缓存。例如,eventStore将在数组中存储迄今为止从服务器接收到的所有事件(可能来自不同的请求),并以事件的id为索引在哈希表中存储。
    • 例如:individualStore、eventStore等
  • Controllers: 它们绑定到一组相关的API调用,例如,eventsController将负责获取事件或特定事件,或创建新事件等。它们将响应“路由”到不同的stores,以供以后检索。一旦已将响应发送到stores,它们不会保留响应。
    • 例如:eventsController、userSearchController等
  • Views: 它们与特定视图绑定。通常,我的应用程序可能在不同的位置具有几个视图,例如,在仪表板上的latestEventsView以及单独的事件页面。
  • Templates:就是模板。

相当多的时间,我的模板需要直接绑定到stores(例如,peopleView希望在列表中列出individualStore中的所有个人,按某种顺序排序)。

有时,它们会绑定到计算属性。

alivePeople: function () { ... }.property('App.individualStore.content.@each'),

在视图中选择的各种过滤和排序选项应该从存储中返回不同的列表。您可以查看我上一个问题,网址为what is the right emberjs way to switch between various filtering options?

这个过滤是由视图自己完成还是由存储完成?

这种跨层绑定是否可以接受?或者说它是代码异味吗?分离关注点好还是我漏掉了什么?控制器在这里应该做更多的事情吗?我的视图应该直接绑定到存储吗?

MVC的哪种特殊情况更适合我的需求?

更新于2012年4月17日:我的研究正在进行中,尤其是从http://vimeo.com/user7276077/videoshttp://jzajpt.github.com/2012/01/17/emberjs-app-architecture.htmlhttp://jzajpt.github.com/2012/01/24/emberjs-app-architecture-data.html

我已经发现了一些设计问题:

  • 控制器发出请求(存储或模型等应该处理,而不是控制器)
  • 状态图表丢失——它们对于视图-控制器交互非常重要(在一段时间后,您会意识到您的交互不再简单)

这是一个关于状态图表的很好的例子:https://github.com/DominikGuzei/ember-routing-statechart-example

更新于2013年1月9日

是的,这个问题问得已经有点久了,但最近还有很多人查看这个问题,这就是为什么我想编辑它,以便人们能够理解。

自此问题发布以来,Ember的情况发生了很大变化,新的指南改进了很多。EmberJS制定了约定(像Rails一样),MVC现在更加明确。

任何仍然感到困惑的人都应该阅读所有指南,并观看一些视频: 西雅图Ember.js Meetup

目前,我正在将我的应用程序升级到Ember.js 1.0.0-pre2


我一直在处理很多类似的问题。相关链接:https://dev59.com/J2LVa4cB1Zd3GeqPwGkO - Nicholas Franceschina
再次强调,这是EmberJS目前缺乏的信息。我昨天才开始使用EmberJS,但由于完全没有关于如何设置EmberJS以及每种类型对象的职责的信息,我已经感到非常沮丧,甚至想拔光我的头发 - 或者至少可以说:这些信息非常难找到。 - Lennard Fonteijn
不使用ember-data,因为API的后端并不像应该那样RESTful。所以我决定自己编写模型和存储器。 - Kazim Zaidi
这个问题几乎已经被回答了。答案是Ember.js指南。也许我只会接受那样的回答;-) - Kazim Zaidi
3个回答

4
  • 您应该将应用程序视为状态。请参考这个链接

  • 最初,仅需要路由和模板来描述并在浏览器中显示内容,这就是Emberjs的新API试图实施的。随着需求变得更加复杂,您可以添加视图、控制器或对象,每个都可以满足特定需求。

  • 如果需要处理任何浏览器事件或包装任何第三方JavaScript库(例如动画、样式),请考虑使用视图。

  • 如果需要捕获特定于域的信息(很可能模拟后端信息),请考虑使用对象。

  • 控制器仅是域对象的代理,并可能封装与对象无关的逻辑。

就是这样了。如果您学会如何按照状态设计应用程序,则其余部分将按照正确的方式落位,前提是您使用的是最新的API并执行我之前提到的规则。


你会如何处理像共享或其他关注点这样的“状态”,它们可以从应用程序的任何地方访问并且不会改变状态(路由)?通常它们看起来像模态框。共享模态框带有选项(通过 Twitter 或 Facebook 共享)是最好的例子。谢谢。 - Kirill Salykin

3
自从Ember 1.0.0-pre4发布了新的路由实现以来,我看到了两个很好的参考文献,描述了标准化的EmberJS应用程序结构。
对于熟悉Rails的人来说,这应该会比较熟悉。

https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences

http://reefpoints.dockyard.com/ember/2013/01/07/building-an-ember-app-with-rails-api-part-1.html

ember-rails项目位于https://github.com/emberjs/ember-rails,其中包括一个Rails生成器,用于创建与上述两个链接描述的结构基本相同的EmberJS应用程序目录结构。

EmberJS指南现在也描述了新的路由结构。 http://emberjs.com/guides/

更新于21/08/2013

如果您正在使用Rails,则ember-rails gem非常棒。我已经成功地使用它了很多次。 Ember社区内有两个努力协助提供标准化的Ember应用程序布局。显然它们将合并,但现在请查看:

https://github.com/rpflorence/ember-tools

https://github.com/stefanpenner/ember-app-kit


非常正确。随着Ember.js达到1.0版本,我们现在有了一种标准化的做事方式。这很像Rails(具备惯例)的实现方式。 - Kazim Zaidi

0

另外还可以参考http://addyosmani.com/largescalejavascript/这篇文章。虽然它不是特别关于EmberJs的,但是它是一篇非常好的文章,可以让你了解如何编写大规模的JavaScript应用程序。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接