Ember.js-模型篇 Introduction上

Introduction

Model 对象代表了应用内部用以描述某项东西/事物的数据。不同的app有不同的模型。

比如,一个用来分享照片的应用可能会用Photomodel来描述照片,用PhotoAlbummodel 来表示影集。在线商店应用或许会用Invoicemodel来描述发票等等。

Models是倾向于被持久化的。这意味着当用户关闭浏览器后,这些数据不会丢失。为了确保用户对model的编辑不会丢失,那就意味着我们需要把这些model数据在某些地方保存起来。

典型的,在很多场景中,model数据的来源和最终去向都是远端的数据库。通常情况下,我们都会写一段JSON来表示当前被处理的model,并且将它在客户端与服务器之间进行传递。但是,Ember提供了一个简便的存储方式,它避免了你再去写保存数据的代码。你可以认为,这个数据被保存在了本地的存储器中。

Ember Data -- 在你创建Ember应用的时候就默认加入了你的项目。它是一个与Ember紧密结合地;可以对数据做增、删、改、查操作的库。

得益于它的适配器工作模式,Ember Data可以通过配置与多种不同的后端协同工作。得益于生态的建设:https://emberobserver.com/categories/ember-data-adapters这里提供了很多种不同的适配器,通过使用不同的适配器,开发者可以不用再写网络相关的代码。

刚开始用Ember Data的时候,会觉得跟之前直接使用AJAX的方式有很大的不同。大多数开发者都习惯于直接使用AJAX来从远端获取数据,这样做确实简单。但是随着时间推移,当项目越来越复杂,那样的架构会变的不易维护。

通过使用Ember Data,你会发现在应用中管理model变的很轻松。

The Store and a Single Source of Truth

一个常见的构建web应用方式是,将UI界面和数据获取紧耦合在一起。比如说,我们现在正在build博客app的管理功能,该功能的作用之一就是显示当前用户的草稿。

你或许会让某个组件来负责载入和存储数据:

app/components/list-of-drafts.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

willRender( ) {

$.getJSON('/drafts').then( data => {

this.set('drafts', data);

});

}

});

然后会这样来展示这些草稿:

app/templates/components/list-of-drafts.hbs

{{#eachdrafts key="id"as|draft| }}

{{draft.title}}

{{/each}}

对list-of-drafts组件本身来说,完美!然而,你的应用是由很多不同的组件构建起来的。那么当别的组件也需要load数据的时候,你又要把相同的代码在另一个组件中再写一遍。

app/components/drafts-button.js

importComponentfrom'@ember/component';

export defaultComponent.extend({

willRender( ) {

$.getJSON('/drafts').then( data => {

this.set('drafts', data);

});

}

});

app/templates/components/drafts-button.hbs

{{#link-to"drafts"tagName="button"}}

Drafts ({{drafts.length}})

{{/link-to}}

同样的信息,有两个独立的请求代码。在这种情况下除了浪费带宽和降低渲染效率之外,还容易让两个地方的值显示不同步。带来不良的用户体验。

同时,这样也把UI和网络代码紧耦合在了一起。如果api地址或者JSON payload的有变化,那么当前的架构不能及时的追踪变化。

SOLID原则告诉了我们对象单一职责。那在这里,组件的职责仅仅应该是展示model数据给用户,而不是load数据

Ember提供了一个单例的store。它来负责从远端load你整个应用的model数据。

Store会知道,当多个地方都需要的都是同样的数据的话,那么它就会仅仅从远端load一次数据。并且当Routes和Controller需要读取或编辑model数据时,会首先访问store。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180816G119E900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券