npm 包 ember-parse 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

Npm，全称 Node Package Manager，是世界上最大的开源软件库之一。

ember-parse 是一个深度结合 Ember.js 和 Parse 的 npm 包，可以帮助前端开发人员快速构建数据管理应用程序。

在本文中，我们将介绍如何使用 ember-parse，包括如何安装、基本使用案例以及进阶指导。

我们将会覆盖以下内容：

安装
构建一个基本的 Ember.js 应用程序
基本的例子
进阶示例

安装

使用以下命令在本地安装 ember-parse：

npm install --save-dev ember-parse

构建一个基本的 Ember.js 应用程序

在开始使用 ember-parse 之前，我们需要建立一个基本的 Ember.js 应用程序。

使用以下命令建立一个新的 Ember.js 应用程序：

ember new my-app

接下来进入使用以下命令进入 my-app 目录：

cd my-app

安装 ember-parse：

npm install ember-parse --save-dev

基本的例子

在此基础上，我们将构建一个应用程序，使用 ember-parse 和 Parse 来保存和显示电影列表。

首先，我们需要登陆到 Parse.com 并新建数据库

登录 Parse.com
点击 Create New App 新建应用
进入 Data Browser 新建一个 Class：Movie
为 Movie 添加以下属性：

属性类型

title String

release Date

director String

genre String

runtime Number

createdAt Date

updatedAt Date

特别要记住配置编码方式为 UTF-8

属性	类型
title	String
release	Date
director	String
genre	String
runtime	Number
createdAt	Date
updatedAt	Date

接下来，我们将安装使用 ember-parse 和 Ember.js 开发我们的电影列表

打开 my-app 目录下的 config/environment.js 文件，并更新插件过滤器列表：

-- -------------------- ---- -------
-- ---------------------

----------------------- - -
  -------- -----
-

------------------ - -
  -------------- ----------------------------
  ---------- ------------------------
--

-------------- - --------------------- -
  ------ ----
--

我们需要更新进程环境变量中的两个变量：

applicationId - Parse 应用程序 ID
restApiId - Parse 的 REST API 密钥

在环境变量中，我们声明了 ember-parse 在启动应用程序时使用的值。请将这些值替换为您自己的 Parse 应用程序的参数。

接下来，我们将创建一个 Ember.js 组件来显示 Parse 中的电影数据。

使用以下命令创建一个名为 movie-list 的组件：

ember generate component movie-list

更新我们的组件使用 ember-parse 取回所有电影：

-- -------------------- ---- -------
-- ----------------------------

------ ----- ---- --------
------ ---------------- ---- ----------------------------------

------ ------- ------------------------
  ------- ------------------------- -
    ------ ------------------------- ----------------- -- -
      ------ ------------------ -- -
        ------ --------------------------------
      --
    --
  ---
  -------- -
    --------------- -
      -------------------------------- ------------------------------- -- -
        --- -------- - -------------------------------------
        ---------------------------------------
      --
    -
  -
---

代码简析：

movies 使用了 store.query 访问从您的 Parse-Class 中获取的所有电影
使用 ParseObjectMixin.mixInto 将查找到的电影转换为可用于更改和保存的 mixin 对象

接下来，我们将编写 UI 代码，以将获取的电影显示为清单中的项目。

-- -------------------- ---- -------
-- ---------------------------------------

------ ----------- ------------------ ------ -------- ---------- -------------

----
  ------- ------ -- ---------
    ----
      ---------------
      ----- ----------------------------------------- ------------------------
    -----
  ---------
-----

最后，我们将更新我们的路由定义以适应新的 movie-list 组件：

-- -------------------- ---- -------
-- -------------

------ ----- ---- --------
------ ------ ---- -----------------------

----- ------ - ---------------------
  --------- --------------------
  -------- --------------
---

--------------------- -
  -------------------------
---

------ ------- -------

我们已经成功地建立了一个可以读取、增加、删除电影列表的 Ember.js 应用程序。

进阶示例

在这里，我们将构建一个复杂的应用程序，使用 ember-parse 查询数据、创建新数据对象和使用观察对象反应列表变化。

查询数据

使用以下代码查询所有电影：

-- -------------------- ---- -------
-- ------------------------

------ ----- ---- --------

------ ------- --------------------
  ------------- -
    ------ -------------------------------- ----------------- -- -
      ----------------- --------
    --
  -
---

创建新数据

使用以下代码创建一个新电影：

-- -------------------- ---- -------
-- ---------------------------

------ ----- ---- --------

------ ------- ------------------------
  -------- -
    ----------- -
      --- ----- - ---------------------
        ------ ------------------
        -------- --------------------
        --------- ---------------------
        ------ ------------------
        -------- -------------------
      ---
      ---------------------------- -------
    -
  -
---

并将数据传递到组件：

// app/templates/movie-list.hbs

{{new-movie saveMovie=(action 'addMovie')}}

观察项目变化

使用以下代码在列表中添加和删除电影：

-- -------------------- ---- -------
-- ----------------------------

------ ----- ---- --------
------ ---------------- ---- ----------------------------------

------ ------- ------------------------
  ------- ------------------------- -
    ------------------------- ----------------- -- -
      ---------------------- -- -
        --------------------------------
      --
      ----------------- --------
    --
  ---
  ------ -
    --------------------------
    ------------------ -----------
    ----------------------------------------- -- -
      ---------------------- -- -
        ---------------------------------------------------------------
      ---
    --

    ---------------------------- -------- ------- -- -
      --------------------------------------------------------------
    ---

    ---------------------------- -------- ------- -- -
      ---------------------------------------
    ---
  -
---

如果您正确地完成了这些步骤，您应该已经拥有一个功能强大的 Ember.js 应用程序。

结论

本文介绍了使用 ember-parse，如何创建和操作数据管理应用程序。我们使用了基本的例子和复杂的演示步骤，帮助了解如何使用 ember-parse 解决开发中的问题。如果您喜欢此教程或有任何疑问，请在评论区留言，我们将对您的反馈非常感激。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca6f