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。