×

EmberJS 教程

EmberJS 概述EmberJS 环境配置EmberJS 应用EmberJS 对象模型EmberJS 模板EmberJS 路由器EmberJS 组件EmberJS 模型EmberJS 视图EmberJS 控制器EmberJS 测试EmberJS 指定查询参数

Ember 对象模型

Ember 类的定义 初始化 继承Ember 类的扩展Ember 计算属性Ember 观察者Ember 数据绑定Ember 枚举Ember 第一章对象模型小结

Ember handlebars模板

Ember handlebars基础Ember handlebars条件表达式Ember handlebars遍历标签Ember handlebars显示对象键Ember handlebars属性绑定Ember {{link-to}} 助手Ember 路由 模板执行渲染顺序Ember {{action}} 助手Ember 表单元素Ember 调试助手Ember 工具类的助手Ember 第二章模板小结

Ember 路由

Ember 路由定义Ember 指定与路由关联的模型Ember 模板渲染Ember 路由重定向Ember 路由终止挑战和激活Ember loading error子路由Ember 查询参数Ember 异步路由

Ember 组件

Ember 组件定义Ember 属性传递Ember 包裹内容自定义包裹组件的HTML标签Ember 处理事件Ember action触发变化

Ember 控制器

Ember 控制器Ember 管理控制器的依赖关系

Ember 模型

Ember model简介Ember 定义模型Ember 记录查询Ember 新建、更新、删除记录Ember 设置记录到StoreEmber model的关联关系处理Ember 元数据Ember 自定义适配器Ember 自定义序列号器

Ember 测试

Ember 测试简介Ember 验收测试Ember 单元测试

EmberJS 模型


模型

在Ember.js中,每个路由都有一个关联的模型。 {{link-to}}或transitionTo()方法将一个参数作为实现路由模型钩子的模型。该模型有助于提高应用程序的鲁棒性和性能。 Ember.js使用Ember Data,它使用服务器中存储的数据操作,并且易于使用流处理API(如socket.io和Firebase或WebSockets)。

核心概念

  • 存储

  • 模型

  • 记录

  • 适配器

  • 序列化器

  • 自动缓存

存储

存储是应用程序中可用的所有记录的中央存储库和缓存。路由和控制器可以访问您的应用程序的存储数据。自动创建DS.Store以在整个对象之间共享数据。

Ember.Route.extend({
  model: function() {
     return this.store.find();
  }
});

模型

模型是定义属性和行为的数据的类。当用户刷新页面时,页面的内容应由模型表示。

DS.Model.extend({
   birthday:  DS.attr('date')
});

记录

记录是模型的实例,其包含从服务器加载的信息,并且通过其模型类型和标识唯一标识。

this.store.find('model_type', id)

适配器

适配器是一个对象,负责将请求的记录转换为对特定服务器后端的适当调用。

序列化器

序列化器负责将JSON数据转换为记录对象。

自动缓存

存储缓存自动记录,并且当从服务器第二次获取记录时,它返回相同的对象实例。这将提高应用程序的性能。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Models using Core Concepts</title>
      <!-- CDN's-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="index">
         <h2>Models using core concepts: </h2>
         <p>{{#link-to 'posts'}}Click for books Detail{{/link-to}}</p>
      </script>

      <script type="text/x-handlebars" data-template-name="posts">
         <h2>Books Name and Author: </h2>
         {{#each post in controller}}
            <p><b>{{post.book}}</b></p>
            <p><i>{{post.author}}<i></p>
         {{/each}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         //The store cache of all records available in an application
         App.Store = DS.Store.extend({
            //adapter translating requested records into the appropriate calls
            adapter: 'DS.FixtureAdapter'
         });

         App.ApplicationAdapter = DS.FixtureAdapter.extend(//extending Adapter);

         App.Router.map(function() {
            //posts route
            this.resource('posts');
         });

         App.PostsRoute = Ember.Route.extend({
            model: function() {
               return this.store.find('post');
            }
         });

         App.Post = DS.Model.extend({
            //data Model
            //setting book and author attr as string
            book: DS.attr('string'),
            author: DS.attr('string')
         });

         //attach fixtures(sample data) to the model's class
         App.Post.FIXTURES = [{
            id: 1,
            book: 'Java',
            author: 'Balaguruswamy'},{
            id: 2,
            book: 'C++',
            author: 'Herbert Schildt'},{
            id: 3,
            book: 'jQuery',
            author: 'Ryan Benedetti'
        }];
      </script>
   </body>
</html>

输出

让我们执行以下步骤,看看上面的代码如何工作:

  • 将上面的代码保存在models.htm文件中

  • 在浏览器中打开此HTML文件。

让我们通过点击以下链接看到一些关于模型的更多详细信息:


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)