简介
loopback-v-computed-mixin 是一个用于 Loopback 框架的插件，通过该插件可以方便地为 model 中的某些属性添加 computed 属性（计算属性），从而实现一些简单的数据处理逻辑。本篇文章主要介绍如何使用该插件并提供示例代码。
安装
使用 npm 安装该插件：
npm install loopback-v-computed-mixin --save
配置
在 model.json 文件中加入 mixins 属性：
{
"name": "yourModelName",
"mixins": {
"Computed": {
"properties": ["propName"]
}
}
}其中 propName 是需要添加 computed 属性的属性名。
使用
在 model.js 文件中添加如下代码：
-- -------------------- ---- -------
-------------- - ----------------------- -
---------------------------- ---------- -
------------------------------- ------------- ----- -
-- -------------- -
----------------------------- - --------------------- - - ----------
- ---- -
------------------------------- -
--------------------- - ------------- - - ----------
---
-
-------
---
---
--上述代码中，我们为 propNam e添加了 computed 属性 propNameComputed，并通过 observe 监听 model 的 loaded 事件，在 model 实例或者数组中添加 propNameComputed 属性并进行相应的数据处理。
示例代码
在示例代码中，我们以一个热门电影列表为例，展示了如何使用 loopback-v-computed-mixin 进行数据处理的具体操作。
model.json
-- -------------------- ---- -------
-
------- --------
------- -----------------
------------- -
----- -
------- ---------
----- ----
--
------- -
------- ---------
----------- ----
--
-------- -
------- ---------
----------- ----
--
----------- -
------- ---------
----------- ----
-
--
--------- -
----------- -
------------- ------------
-
-
-model.js
-- -------------------- ---- -------
-------------- - --------------- -
-- -- -------- --
-------------------- ---------- -
----------------------- ------------- ----- -
-- -------------- -
------------------------------ - -------------------------------- - --- - - --- - - --------------------- - -- - - -----
- ---- -
------------------------------- -
---------------------- - ------------------------ - --- - - --- - - ------------- - -- - - -----
---
-
-------
---
---
--index.html
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
----- ----------------
----- --------------- ---------------------------- -------------------
-------
------
--- ----------------
-----
------- ------------------------------------------------------------
------- -------------------------------
--------
----------------------- -------------- -
------------ ----------- ------ -
-------------------------------------------------------------------------------------------
---
---
---------
-------
-------上述示例中，我们添加了 computed 属性 durationFormatted，并通过观察 model 的 loaded 事件获取每条数据的 duration 属性并转换为 durationFormatted 属性，最终在前端页面中展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d081e8991b448e48f9