EmberJS 是一款流行的前端框架，它提供了许多强大的功能，包括路由和模型。在某些情况下，我们需要在同一个路由下加载多个模型，本文将介绍如何使用 EmberJS 实现这个功能。
背景
假设我们正在开发一个电子商务网站，其中有一个页面需要同时显示用户购物车和相关产品信息。这意味着我们需要在同一个路由中加载两个模型，即 cart 和 products。那么，如何实现这个功能呢？
解决方案
在 EmberJS 中，我们可以使用 model() 方法来加载模型。默认情况下，model() 方法只会加载一个模型，但是我们可以通过重写该方法并返回一个对象来加载多个模型。
下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- -----------------------
------ ------- ----- --------- ------- ----- -
------- -
------ -
----- ----------------------------- ---
--------- -----------------------------
--
-
-在上面的代码中，我们重写了 model() 方法，并返回了一个包含两个模型的对象。其中，cart 模型是通过 findRecord() 方法获取的，而 products 模型则是通过 findAll() 方法获取的。
一旦我们在路由中加载了这两个模型，我们就可以在模板中使用它们了。下面是一个示例模板：
-- -------------------- ---- -------
------ ---------
----- -------------
------- ----------
----
------- ----------------- -- --------
----------------- ---------------------
---------
-----
--------
------- ---- -- ----------
-------
----- -----------------
---------- -------------
----
------- --------------- -- -----------
-------------------- ------------------------
---------
-----
-------在上面的模板中，我们通过 @model 属性访问了路由中加载的两个模型，并将它们显示在页面上。
结论
在 EmberJS 中，在同一个路由中加载多个模型非常容易。我们只需要重写 model() 方法并返回一个包含多个模型的对象即可。这种方法不仅可以提高代码的复用性和可读性，还可以优化数据的加载效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12404