随笔分类 -  Ember.js

摘要:写在前面的话: 公司的新项目需要用到Ember.js,版本为v1.13.0。由于网上关于Ember的资料非常少,所以只有硬着头皮看官网的Guides,为了加深印象和方便以后查阅就用自己拙劣的英语水平把这系列教程翻译为了中文,在这里把它们分享出去,希望能帮助到大家。 目前只是初稿,里面不乏有一些翻译错 阅读全文
posted @ 2016-02-03 16:33 鱼不吐泡泡 阅读(1444) 评论(1) 推荐(2)
摘要:一、Should I use a query or a filter to seach records?我应该使用一个查询或者过滤器来搜索记录吗? 这取决于你想要搜索多少reocrds并且它们是否被加载到store中了。 1. Queries (1) Queries对于搜索数百,数千,或者甚至百万的 阅读全文
posted @ 2016-02-03 11:26 鱼不吐泡泡 阅读(286) 评论(0) 推荐(0)
摘要:一、概述 1. 在Ember Data中,和后台数据存储通信的逻辑存在于Adapter中。Ember Data的有一些内置的假设,一个 REST API 应该怎么看。如果你的后台约定和这些假设不同,Ember Data通过交换或扩展默认的适配器很容易改变它的功能。 2. 自定义适配器的一些原因包括在 阅读全文
posted @ 2016-02-03 10:02 鱼不吐泡泡 阅读(281) 评论(0) 推荐(0)
摘要:一、概述 1. 如果你的Ember应用程序需要从一个HTTP服务器加载JSON数据,在你的服务器返回的任何格式中,配置Ember Data的过程将会加载records。 2. store使用一个被称为adapter的对象去了解如何与网络通信。默认的,store将会使用DS.RESTAdapter,它 阅读全文
posted @ 2016-02-01 18:03 鱼不吐泡泡 阅读(332) 评论(0) 推荐(0)
摘要:一、概述 默认的,store将会使用 DS.RESTAdapter来加载和存储records。这个RESTAdapter假定URLS和JSON关联每一个model是约定好的;这意味着,如果你遵循这个规则,你将不需要配置这个adapter或者为了启动编写任何代码。 二、URL Conventions 阅读全文
posted @ 2016-02-01 17:23 鱼不吐泡泡 阅读(493) 评论(0) 推荐(0)
摘要:1. 随着从store中返回的records,你可能需要处理一些元数据。Metadata是伴随着特定model或者type的一种数据,而不是record。 2. 分页是使用元数据的一个常见的例子。想象一个博客有比你一次可以显示的更多的posts。你可能会这样查询: let result = this 阅读全文
posted @ 2016-02-01 15:24 鱼不吐泡泡 阅读(352) 评论(0) 推荐(0)
摘要:Modifying Attributes 1. 一旦一条record被加载,你可以开始改变它的属性。在Ember.js对象中属性的行为就像正常的属性。作出改变就像设置你想要改变的属性一样简单: var tyrion = this.store.findRecord('person', 1); // . 阅读全文
posted @ 2016-02-01 14:54 鱼不吐泡泡 阅读(276) 评论(0) 推荐(0)
摘要:Ember Data的store为检索一个类型的records提供一个接口。 一、Retrieving a single record(检索单记录) 1. 通过type和ID使用store.findRecord()去检索一条record。这将返回一个promise,它通过请求的record来实现: 阅读全文
posted @ 2016-02-01 14:41 鱼不吐泡泡 阅读(429) 评论(0) 推荐(0)
摘要:一、概述 1. 在Ember Data上以每个实例为基础,records被持久化。在DS.Model的任何一个实例上调用save()并且它将产生一个网络请求。 2. 下面是一些例子: var post = store.createRecord('post', { title: 'Rails is O 阅读全文
posted @ 2016-02-01 13:57 鱼不吐泡泡 阅读(239) 评论(0) 推荐(0)
摘要:一、概述 1. store是作为一个所有records的缓存,这些records已经被你的应用程序加载。在你的app中如果你的路由或者一个controller请求一条record,如果它在缓存中这个store可以立即返回它。否则,这个store必须请求adapter去加载它,这通常意味着从服务器上进 阅读全文
posted @ 2016-02-01 13:43 鱼不吐泡泡 阅读(206) 评论(0) 推荐(0)
摘要:一、Creating 1. 你可以通过调用在store中的createRecord方法来创建records。 store.createRecord('post', { title: 'Rails is Omakase', body: 'Lorem ipsum' }); 2. 这个store对象可以通 阅读全文
posted @ 2016-02-01 12:58 鱼不吐泡泡 阅读(249) 评论(0) 推荐(0)
摘要:一、概述 1. 模型是一个类,它定义了你呈现给用户的数据的属性和行为。用户希望如果他们离开你的应用程序,并返回后(或如果他们刷新页面)看到的任何东西应该被一个model代表。 2. 确保在ember.js后引入ember-data.js: <script type="text/javascript" 阅读全文
posted @ 2016-02-01 12:45 鱼不吐泡泡 阅读(334) 评论(0) 推荐(0)
摘要:一、概述 1. 模型是表示应用程序呈现给用户的底层数据的对象。不同的应用程序有不同的模型,这取决于它们正在试图解决什么问题。 2. 例如,一个照片共享应用程序可能有一个Phone模型来代表一个特殊的照片,并且PhotoAlbum代表一组照片。相反,一个在线购物应用程序可能有不同的模型,例如Shopp 阅读全文
posted @ 2016-02-01 11:14 鱼不吐泡泡 阅读(392) 评论(0) 推荐(0)
摘要:1. 有时候,特别是当嵌套资源的时候,我们需要两个controllers之间的某种连接。让我们拿这个router当做例子: app/router.js var Router = Ember.Router.extend({}); Router.map(function() { this.route(" 阅读全文
posted @ 2016-01-28 13:35 鱼不吐泡泡 阅读(245) 评论(0) 推荐(0)
摘要:1. 一个controller的model可以代表几个记录也可以代表单个。这里,路由的model hook返回一个歌曲数组: app/routes/songs.js export default Ember.Route.extend({ model() { return this.store.fin 阅读全文
posted @ 2016-01-28 13:17 鱼不吐泡泡 阅读(260) 评论(0) 推荐(0)
摘要:一、Controllers 1. 在Ember.js中,controllers允许你使用展现逻辑装饰你的models。通常,models将会有保存到服务器的属性,然而controllers将会有不需要保存到服务器的属性。 2. 例如,如果你正在创建一个blog,你想有一个BlogPost model 阅读全文
posted @ 2016-01-28 11:20 鱼不吐泡泡 阅读(263) 评论(0) 推荐(0)
摘要:一、概述 当你通过和另外一个组件组合的时候,组件就会真正发挥它们的所有潜能。比如<ul>元素,只有<li>元素是适合作为它的子元素的。如果我们希望同样类型的行为,那么我们就必须组合组件。 就像我们组合HTML元素一样,我们可以以同样的方式用于组件。 app/templates/application 阅读全文
posted @ 2016-01-28 11:18 鱼不吐泡泡 阅读(427) 评论(0) 推荐(0)
摘要:一、概述 1. 当一个组件在模板中被使用时,它具有发送action到这个模板的controller和routes的能力。当重大事件发生的时候,这些允许组件通知application,比如点击组件一个特殊的元素。 2. 像{{action}}Handlebars辅助器,来自组件的actions首先会去 阅读全文
posted @ 2016-01-27 23:16 鱼不吐泡泡 阅读(315) 评论(0) 推荐(0)
摘要:1. 组件允许你定义可以在整个应用程序中重用的控件。如果它们够通用,它们也可以在被共享给其他人并且在许多应用程序中被使用。 2. 为了使一个可重用的控件有用,然而,你首先需要你的应用程序的用户和它交互。 3. 你可以通过使用{{action}}辅助器使组件中的元素可交互。这和应用程序template 阅读全文
posted @ 2016-01-27 18:17 鱼不吐泡泡 阅读(227) 评论(0) 推荐(0)
摘要:一、概述 默认的,每一个组件都基于一个<div>元素。如果你在开发者工具中查看一个渲染的组件,你将会看到一个像这样的DOM表示: <div id="ember180" class="ember-view"> <h1>My Component</h1> </div> 你可以为你的组件自定义Ember生 阅读全文
posted @ 2016-01-27 18:04 鱼不吐泡泡 阅读(312) 评论(0) 推荐(0)