虽然我对Web开发不是新手,但我对客户端MVC框架还是很陌生的。我做了一些研究,决定用EmberJS试试。我浏览了TodoMVC指南,它对我来说很有意义...
我已经设置了一个非常基本的应用程序;索引路由,两个模型和一个模板。我有一个服务器端的php脚本运行,返回一些数据库行。
有一件事让我非常困惑,那就是如何在同一条路径上加载多个模型。我读过一些关于使用setupController的信息,但我仍然不清楚。在我的模板中,我有两个表,我试图用不相关的数据库行来加载它们。在一个更传统的Web应用程序中,我只会发出sql语句,并循环它们来填充行。我很难将这个概念翻译成EmberJS。
如何在同一路由上加载不相关数据的多个模型?
我正在使用最新的ember和ember数据库。
更新
虽然第一个答案给出了处理它的方法,但第二个答案解释了什么时候合适,什么时候不合适。
6条答案
按热度按时间zzoitvuj1#
请注意:
你需要谨慎地考虑在你的模型钩子中返回多个模型是否合适。问你自己这个简单的问题:
1.我的路线是否使用一个slug
:id
加载基于url的动态数据?例如this.resource('foo', {path: ':id'});
如果您回答是
**不要尝试从该路线中的模型挂钩加载多个模型!!!**原因在于Ember处理链接到路线的方式。如果您在链接到该路线时提供了模型(
{{link-to 'foo' model}}
,transitionTo('foo', model)
),它将跳过模型挂钩并使用提供的模型。但只有一种型号会被交付。这里有一个替代方案:在
setupController
/afterModel
中执行示例:http://emberjs.jsbin.com/cibujahuju/1/edit
如果你需要它来阻止转换(就像model钩子那样),从
afterModel
钩子返回一个promise。你需要手动跟踪钩子的结果,并将它们连接到你的控制器上。示例:http://emberjs.jsbin.com/diqotehomu/1/edit
如果您回答“否”
继续,让我们从路径的模型挂钩返回多个模型:
示例:http://emberjs.jsbin.com/tuvozuwa/1/edit
如果它是需要等待的东西(比如对服务器的调用,某种承诺)
示例:http://emberjs.jsbin.com/xucepamezu/1/edit
在Ember数据的情况下
示例:http://emberjs.jsbin.com/pekohijaku/1/edit
如果一个是承诺,而另一个不是,这是所有的好,RSVP将高兴地只是使用该值
示例:http://emberjs.jsbin.com/coxexubuwi/1/edit
混搭,玩得开心!
示例:http://emberjs.jsbin.com/joraruxuca/1/edit
s1ag04yj2#
注:对于Ember 3.16+应用程序,以下是相同的代码,但更新了语法/模式:https://stackoverflow.com/a/62500918/356849
下面是Ember〈3.16的代码,尽管代码可以像3.16+一样完全向后兼容,但写旧代码并不总是很有趣。
你可以使用Ember.RSVP.hash来加载几个模型:
app/routes/index.js
在您的模板中,您可以引用
people
和companies
来获取加载的数据:app/templates/index.js
这是一个包含以下示例的Twiddle:https://ember-twiddle.com/c88ce3440ab6201b8d58
zfycwa2u3#
获取已接受的答案,并为Ember 3.16+更新该答案
app/routes/index.js
请注意,建议不要使用setupController设置别名,因为它会混淆数据的来源以及数据如何从路由流向模板。
因此,在您的模板中,您可以执行以下操作:
holgip5t4#
我使用的答案类似于Marcio提供的答案,但它看起来像这样:
xn1cxnb45#
如果使用Ember Data,对于不相关的模型,它会变得更简单:
如果您只想撷取
model2
的对象属性,请使用DS.PromiseObject,而不要使用DS.PromiseArray:mnemlml86#
如果您不介意修改API端点,Ember Data v1.13中实现的最新版本JSON-API可以很好地支持在同一请求中捆绑不同的资源。
在我的例子中,我有一个
session
端点。会话与一个用户记录相关,而用户记录与我一直希望加载的各种模型相关。所有这些都是通过一个请求来实现的,这是非常好的。根据规范需要注意的一点是,您返回的所有实体都应该以某种方式链接到正在接收的主实体。我相信,在规范化JSON时,ember-data只会遍历显式关系。
对于其他情况,我现在选择延迟加载额外的模型,直到页面已经加载,也就是说,对于单独的数据面板或其他什么,这样至少页面可以尽可能快地呈现。这样做会考虑到“自动”错误加载状态的一些损失/变化。