# wildember简介
wildember是一个方便、快捷连接野狗实时服务适配器。
[wildemer](https://github.com/ubuntuvim/wildemer)是一个类似[Emberfire](https://github.com/firebase/emberfire)的适配器,
不同的是前者用于适配[野狗](https://www.wilddog.com/)实时服务,
后者用于适配[firebase](https://www.firebase.com/)实时服务。
野狗和firebase都是实时的数据服务,但是遗憾的是firebase是谷歌的,你懂的在天朝想访问都是比较那个啥的!!!
所以找了国内一个类似的、服务也很棒的产品——野狗。野狗提供了丰富、人性化的API文档,以及强大的sdk,对于开发者来说是非常好的事情。
也正是因为firebase无法访问所以我们为Ember.js的开发者提供了连接野狗的适配器wildemer。它的使用方式和firebase一模一样,因为WildEmber是直接fork Emberfire的。即使上不了firebase我们也一样可以享受到非常棒的实时服务。
## API使用参考
wildember与emberjs的store提供了一致的API,其中最常用、最主要的方法有如下几个:
API | 说明
----|------
findAll | 查询节点所有数据
peekAll | 从缓存中查询节点所有数据
query | 根据给定条件查询
findRecord | 根据id查询一条记录
peekRecord | 根据id从缓存中查询一条记录
createRecord | 创建一条记录
**详细API解释请看下面的网址**
1. [findAll、peekAll、query、findRecord、peekRecord](https://guides.emberjs.com/v2.11.0/models/finding-records/)
2. [createRecord、deleteRecord](https://guides.emberjs.com/v2.11.0/models/creating-updating-and-deleting-records/)
## 运行本项目
如果你想直接运行本项目可以clone代码到自己本地,然后执行`npm install`和`bower install`安装项目依赖,安装完毕后执行[http://localhost:4200]可以查看效果。
## 安装wildember
* 使用命令安装:`ember install wildember`。
* 修改`app/adapters/application.js`,如果没有自动创建这个文件请手动创建,或者使用命令`ember g adapter application`创建。
在文件内增加如下代码:
```js
import WildemberAdapter from 'wildember/adapters/wildember';
export default WildemberAdapter.extend({
wilddogConfig: {
syncDomain: "<appId>.wilddog.com",
syncURL: "https://<appId>.wilddogio.com" //输入节点 URL
}
});
```
代码中的`<appId>`是你在野狗创建的应用id。可以在[https://www.wilddog.com/dashboard/](https://www.wilddog.com/dashboard/),如下图所示:
![appid](http://emberteach.ddlisting.com/content/images/2016/09/wilddog.png)
如果图片无法显示,请直接点击链接查看图片。[图片链接](http://emberteach.ddlisting.com/content/images/2016/09/wilddog.png)
红色圈中的部分就是你的应用appid。详细例子请参考:[library-app的adapters/application.js](https://github.com/ubuntuvim/wildember/blob/master/tests/dummy/app/adapters/application.js)
* 导入wilddog,请在你的ember应用的`app/index.html`文件中导入野狗的库文件。
```html
<script src = "https://cdn.wilddog.com/sdk/js/2.0.0/wilddog.js"></script>
```
详细例子请参考:[library-app的index.html](https://github.com/ubuntuvim/wildember/blob/master/tests/dummy/app/index.html)
* **配置野狗后台**
安装并配置完毕之后我们还需要在野狗的服务后台设置域名的白名单。
1. 进入你的应用管理后台,地址[https://www.wilddog.com/dashboard/](https://www.wilddog.com/dashboard/)。
2. 点击你的应用进入详细设置页面
3. 选择左侧是“安全”,然后输入的你的域名,请看下图所示位置,如果你不配置白名单访问的时候会提示你无权访问数据
4. 经过前面的设置还是提示无权访问还需要在“实时数据同步”中设置读写权限,在修改规则表达式为:
```
{
"rules": {
".read": true,
".write": true
}
}
```
![设置白名单](http://emberteach.ddlisting.com/content/images/2016/09/wildember2.png)
如果图片无法显示,请直接点击链接查看图片。[图片链接2](http://emberteach.ddlisting.com/content/images/2016/09/wildember2.png)
配置完成之后请重启的你的APP。
## 使用wildember的完整示例。
[libaray-app](https://github.com/ubuntuvim/wildember/tree/master/tests/dummy)
或者请直接预览:[http://wildember.ddlisting.com/](http://wildember.ddlisting.com/)
## 分页设置
由于是实时数据服务,分页设置并不好处理,参考野狗官方给的[分页实例](https://coding.net/u/wilddog/p/wilddog-gist-js/git/tree/master/src/pagination#user-content-yi-kao-shang--ye-de-zui-hou--tiao-ji-lu-huo-qu-xia--ye-shu-ju),再整合到wildember中。目前实现的分页还只能点击“下一页”实现,还不能直接实现输入页码、直接跳转到某一页功能,这个主要是受限于野狗提供API。**此分页非常适用于滚动式分页。**
### 如何分页
分页效果请看[http://localhost:4200/user](http://localhost:4200/user)、[http://localhost:4200/pagination](http://localhost:4200/pagination),具体实现代码请看下面的例子(以其中的pagination为例子):
#### 一、设置序列化器(JSONSerializer)
使用命令`ember g serialize application`创建一个处理数据的`JSONSerializer`,默认可能创建的可能是`JSONAPISerializer`,需要修改。
你可以直接复制下面的代码到你的JSONSerializer中。
```js
// app/serializers/application.js
import JSONSerializer from 'ember-data/serializers/json';
/**
* 子类重写normalizeResponse方法,实现野狗的分页
* @type {[type]}
*/
export default JSONSerializer.extend({
/**
* 分页处理
*/
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
//分页
if (store.get('typeMaps')
&& typeof(store.get('typeMaps').metadata) !== 'undefined'
&& store.get('typeMaps').metadata.isPagination) {
// Ember.Logger.debug("JSONSerializer.normalizeResponse:分页处理。");
// 获取最后一个元素的位置
let len = payload.length-1;
let lsId = payload[len].id;
// 野狗分页设置:https://coding.net/u/wilddog/p/wilddog-gist-js/git/tree/master/src/pagination#user-content-yi-kao-shang--ye-de-zui-hou--tiao-ji-lu-huo-qu-xia--ye-shu-ju
//记录下一页开始记录id
store.set("startAtId", lsId);
//删除最后一个元素;
payload.pop();
}
return this._super(...arguments);
}
})
```
### 二、查询数据
查询数据与图片查询一直,唯一不同的是要在查询之前设置一个分页标识`isPagination`。请看下面组件类中查询数据的方法。
```js
// app/components/pagination-test.js
import Ember from 'ember';
export default Ember.Component.extend({
startAt: null,
list: Ember.computed('startAt', function() {
let store = this.get("store");
//设置分页标记
store.set('typeMaps.metadata', { 'isPagination':true } );
return store.query('todo-item', {
startAt: store.get('startAtId'), //this.get("startAt"),
orderByChild: 'timestamp',
limitToFirst: 2 //每页显示的条数
});
}),
actions: {
nextPage() {
// 设置下一页开始的位置
// let lastEleId = this.get("store").get('startAtId');
this.set('startAt', this.get("store").get('startAtId'));
}
}
});
```
注意:`store.set('typeMaps.metadata', { 'isPagination':true } );`这一行代码的设置,如果没有设置一个属性将导致无法分页,结果只是查询出2条数据并且点击下一页也是无效的。
### 分页展示页面
```hbs
{{! app/templates/pagination.hbs }}
{{pagination-test store=store model=model}}
```
```hbs
没有合适的资源?快使用搜索试试~ 我知道了~
连接野狗实时服务Ember.js适配器 .rar
共124个文件
js:64个
hbs:26个
gitkeep:13个
需积分: 5 0 下载量 183 浏览量
2023-06-06
10:13:26
上传
评论
收藏 85KB RAR 举报
温馨提示
Ember Data 在Ember中,每个路由都有与之相关联的一个模型。这个模型可以通过路由的model钩子进行设置,可以通过给{{link-to}}传入一个参数,也可以通过调用路由的transitionTo()方法。 对于简单的应用来说,可以通过jQuery来从服务器加载JSON数据,并将这些JSON数据对象作为模型。 但是,使用一个模型库来管理查询、更改和将更改保存回服务器,将会大大的简化代码,同时也能提升应用的健壮性和性能。 许多Ember应用使用Ember Data来处理模型。Ember Data是一个与Ember.js紧密结合在一起的代码库,简化了客户端从服务器获取记录,在本地进行缓存以提高性能,保存修改到服务器,创建新的记录等一系列的操作。 Ember Data不需要进行任何配置,就可以实现通过服务端提供的RESTful JSON API加载和保存记录以及它们的管理关系,这些操作都遵从于特定的惯例。 目前,Ember Data还是一个独立于Ember.js的库。在Ember Data被作为标准发行版的一部分之前,你可以在builds.emberjs.com下载最新
资源推荐
资源详情
资源评论
收起资源包目录
连接野狗实时服务Ember.js适配器 .rar (124个子文件)
.bowerrc 60B
.editorconfig 543B
.ember-cli 280B
loading2.gif 17KB
.gitignore 247B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
about.hbs 3KB
navbar.hbs 2KB
library-item-form.hbs 1KB
index.hbs 1KB
contact.hbs 1KB
seeder-block.hbs 841B
seeder.hbs 800B
edit.hbs 786B
index.hbs 778B
pagination.hbs 574B
user-list.hbs 539B
pagination-test.hbs 533B
invitation.hbs 408B
library-item.hbs 386B
index.hbs 374B
libraries.hbs 361B
new.hbs 340B
form.hbs 323B
edit.hbs 286B
number-box.hbs 183B
application-loading.hbs 178B
nav-link-to.hbs 75B
application.hbs 71B
user.hbs 70B
fader-label.hbs 60B
contact.hbs 52B
index.html 1017B
index.html 696B
wildember.js 29KB
wildember.js 9KB
application.js 6KB
contact.js 2KB
seeder.js 2KB
seeder.js 2KB
todo-item.js 2KB
index.js 1KB
application.js 1KB
environment.js 1KB
ember-try.js 946B
book.js 928B
edit.js 924B
user.js 924B
ember-cli-build.js 808B
waitable.js 808B
library.js 786B
pagination-test.js 769B
contact.js 747B
edit.js 733B
user-list.js 731B
pagination-test-test.js 727B
router.js 706B
new.js 702B
index.js 613B
application-test.js 551B
seeder.js 528B
module-for-acceptance.js 504B
start-app.js 482B
author.js 467B
to-promise.js 460B
wildember-test.js 443B
index.js 432B
wildember-test.js 417B
app.js 406B
pagetion-test.js 394B
pagation-test.js 394B
fader-label.js 388B
contact.js 388B
contact.js 385B
application-test.js 346B
wildember-test.js 342B
pagination.js 296B
application.js 280B
seeder-block.js 262B
resolver.js 255B
testem.js 237B
library-item-form.js 226B
index.js 200B
invitation.js 166B
number-box.js 147B
user.js 141B
nav-link-to.js 125B
invitation.js 123B
共 124 条
- 1
- 2
资源评论
野生的狒狒
- 粉丝: 1952
- 资源: 1884
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功