- 博客(58)
- 收藏
- 关注
翻译 #9 自定义序列化器
英文原版:https://guides.emberjs.com/v2.14.0/models/customizing-serializers/在Ember Data中,序列化器用来给发送和接收的数据做格式化。默认的,Ember Data会以JSON API的形式来序列化数据。如果你的后端使用了不同的数据格式,Ember Data则允许你自定义序列化器或者使用符合要求的其他序列化器。Ember Dat
2017-08-14 23:15:00 328 1
翻译 #5 关联关系
英文原版: https://guides.emberjs.com/v2.14.0/models/relationships/Ember Data内建了若干关系类型帮你定义当前的模型与其他模型之间的联系。一对一要声明两个模型之间是一对一关系,使用 DS.belongsTo:app/models/user.jsimport DS from 'ember-data';export default DS.M
2017-08-13 14:42:05 360
翻译 #1 应用和实例
英文原版:https://guides.emberjs.com/v2.14.0/applications/applications-and-instances/每一个Ember应用都相当于是从Ember.Application继承的一个类。这个类用来声明和配置组成你应用的若干对象。当你的应用启动的时候,它会创建一个Ember.ApplicationInstance 来管理它的状态。这个实例作为你的应
2017-08-13 14:09:15 318
翻译 #8 自定义适配器
英文原版:https://guides.emberjs.com/v2.14.0/models/customizing-adapters/在Ember Data中,适配器决定了如何持久化发往后端存储的数据,例如URL格式、REST API标头等。(数据本身的格式是由序列化器决定的。) Ember Data默认的适配器对REST API的结构有一些内建的假定。如果你的后端没有遵循这些假定,Ember D
2017-08-06 23:32:35 357
翻译 #7 处理元数据
英文原版:https://guides.emberjs.com/v2.14.0/models/handling-metadata/伴随着store收到远程返回的记录,你有可能会需要处理元数据–metadata。 Metadata 是与某种模型或类型有关的数据,并非与记录有关。分页是一个展示如何使用metadata的常见例子。假设博客包含的帖子太多,一次展示不完。那么你可能会想这么分阶段的获得不同的帖
2017-08-02 22:20:30 254
翻译 #6 记录入库
英文原版:https://guides.emberjs.com/v2.14.0/models/pushing-records-into-the-store/认知store的其中一种方法是将它作为已读取的记录的缓存。如果route或controller需要获得记录,那么store可以立即返回已被缓存的记录;否则store会向适配器索取记录,这通常意味着将会向服务器发起一个请求。相对于等待从远端获取记录
2017-07-30 22:34:52 237
翻译 #4 创建、更新和删除
创建记录你可以调用store的createRecord()方法创建一条记录:store.createRecord('post', { title: 'Rails is Omakase', body: 'Lorem ipsum'});在controller和route中可以通过this.get(‘store’)来获得store对象。更新记录更新一条记录,实际上是更新记录中属性的值:this.
2017-07-28 13:55:33 247
翻译 #3 查询记录
英文原版:https://guides.emberjs.com/v2.14.0/models/finding-records/Ember Data的store提供了一个接口用来检索某个类型的记录。检索单条记录使用store.findRecord()来通过type和id来检索一条记录。这将会返回一个带有记录数据的promise对象。let blogPost = this.get('store').fi
2017-07-27 16:08:21 774
翻译 #2 定义模型
英文原版:https://guides.emberjs.com/v2.14.0/models/defining-models/模型,是一个定义了交互数据中的属性和行为的一个类,并且通过模型来向用户展示内容。任何用户希望看到的内容都应该用model来代表。当你需要创建一个新的模型时,你需要在models文件夹下面创建一个新的文件,并且这个新的模型要从DS.Model类继承。用Ember CLI命令来创
2017-07-27 14:35:49 252
翻译 #1 介绍
英文原版:https://guides.emberjs.com/v2.14.0/models/模型(Model)是一个代表应用提供给用户的基础数据的对象。不同应用基于要面对的问题提供不同的模型。比如,一个用来分享照片的应用或许需要一个Photo模型用来代表照片,一个PhotoAlbum模型用来代表一组照片。于此形成鲜明对比的是,一个在线的购物应用会需要若干个不同的模型,比如购物车、票据、购买项等。模
2017-07-27 00:01:33 275
翻译 Controller
英文原版:https://guides.emberjs.com/v2.14.0/controllers/Controller与组件类似,它会在进入路由的时候被执行。controller只接收一个参数 —- 路由中的model( )钩子返回的model。要定义一个controller,使用命令:ember generate controller my-controller-namecontroller
2017-07-20 00:05:44 399
翻译 #8 通过Actions触发变化
英文原版:https://guides.emberjs.com/v2.14.0/components/triggering-changes-with-actions/
2017-07-17 22:55:31 370
翻译 #7 事件处理
英文原版:https://guides.emberjs.com/v2.14.0/components/handling-events/你可以在你的组件上通过事件处理函数响应用户事件,比如:双击、悬停等。实现这样的方式比较简单。例子,比如我们现在有个模板:{{#double-clickable}} This is a double clickable area!{{/double-clickab
2017-07-16 22:30:31 280
翻译 #6 块参数
英文原版:https://guides.emberjs.com/v2.14.0/components/block-params/组件可以被传入参数,同时组件也可以通过块参数来返回输出。通过{{yield}}从组件返回值app/templates/index.hbs{{blog-post post=model}}app/templates/components/blog-post.hbs{{yield
2017-07-16 21:10:46 200
翻译 #5 自定义组件根元素
英文原版:https://guides.emberjs.com/v2.14.0/components/customizing-a-components-element/默认的,每一个组件都被一个<div>元素包裹。如果你通过浏览器的带的开发工具来观察一下DOM结构的话,你会发现你的每个组件渲染后的DOM最外层元素都如下面这样:<div id="ember180" class="ember-view"
2017-07-10 22:03:15 882
翻译 #4 为组件提供内容
英文原版:https://guides.emberjs.com/v2.14.0/components/wrapping-content-in-a-component/可能在有些时候,你或许需要你的组件包裹一些在其他模版中定义的内容。比如,假设现在你创建了一个blog-post组件,用来在应用中展示一篇博客:app/templates/components/blog-post.hbs<h1>{{tit
2017-07-09 22:54:59 235
翻译 #3 给组件传递属性
英文原版:https://guides.emberjs.com/v2.14.0/components/passing-properties-to-a-component/组件是与它所在的环境完全隔离的,所以任何组件需要的东西都必须要传递给它比如,假设你现在有个blog-post组件用来展示博客:app/templates/components/blog-post.hbs<article class=
2017-07-08 23:32:07 264
翻译 #2 组件生命周期
英文原版:https://guides.emberjs.com/v2.13.0/components/the-component-lifecycle/组件最吸引人的就是它允许你介入DOM。这允许你可以直接对DOM进行操纵,监听和响应浏览器事件,并且你可以在Ember应用中加入第三方JS库。当组件被初次渲染,重新渲染直至最后被移除,Ember提供了一系列的生命周期钩子可以使你在组件特定的生命周期执行特
2017-07-05 21:36:16 2868
翻译 #9 input助手
英文原版:https://guides.emberjs.com/v2.13.0/templates/input-helpers/{{input}}和{{textarea}}助手是创建常用表单控件的最简单的方式。通过使用这些助手,你可以创建与用原生<input>或<textarea>生成的相同的表单,但是需要清楚的是Ember具有的双向绑定的特性。文本字段{{input value="http://w
2017-07-01 23:03:47 234
翻译 #1 定义组件
英文原版:https://guides.emberjs.com/v2.13.0/components/defining-a-component/定义组件,使用以下命令:ember generate component my-component-name组件在命名时,必须至少带一个”-“号。所以blog-post是一个合法的命名,audio-player-controls也是,但是post是不合法的。
2017-07-01 18:18:37 240
翻译 #8 Actions
英文原版:https://guides.emberjs.com/v2.13.0/templates/actions/你的应用肯定需要一些用户的交互功能。比如,想象一下我们现在有一个模板用来展示了一个帖子的标题,并且当点击标题的时候,帖子的内容会被展示出来。如果你在HTML DOM元素上使用{{action}}助手,当用户点击这个元素的时候,那么一个被你命名的action事件就会被发送到当前模板对应的
2017-07-01 18:00:15 285
翻译 #7 Links
英文原版:https://guides.emberjs.com/v2.13.0/templates/links/{{link-to}}组件通过{{link-to}}组件创建一个链接到某个路由的超链接。app/router.jsRouter.map(function() { this.route('photos', function(){ this.route('edit', { path
2017-07-01 14:04:50 225
翻译 #6 绑定元素属性
英文原版:https://guides.emberjs.com/v2.13.0/templates/binding-element-attributes/除了绑定普通文本之外,你同样可能会想要绑定模板中HTML元素的属性。例如,我们假设你的controller中有个属性,它的值是一个链接到图片的URL。<div id="logo"> <img src={{logoUrl}} alt="Logo"
2017-07-01 13:31:23 212
翻译 #5 遍历Hash对象
英文原版:https://guides.emberjs.com/v2.13.0/templates/displaying-the-keys-in-an-object/如果你需要在模板中显示javascript对象的key或者value,那么你可以使用{{#each-in}}助手:/app/components/store-categories.jsimport Ember from 'ember';
2017-07-01 13:18:20 208
翻译 #4 展示列表
英文原版:https://guides.emberjs.com/v2.13.0/templates/displaying-a-list-of-items/
2017-06-27 20:59:51 183
翻译 #3 条件判断
英文原版:https://guides.emberjs.com/v2.13.0/templates/conditionals/像比如if 或者 unless这样的语句,在Ember中也被作为助手实现了。助手有三种被调用的方式,下面就来了解每种的调用方式。行内调用第一种—- 行内调用。这看上去就与显示属性的写法差不多,不过需要接收参数:<div> {{if isFast "zoooom" "put
2017-06-25 13:08:20 227
翻译 #2 内建的助手
英文原版:https://guides.emberjs.com/v2.13.0/templates/built-in-helpers/内建的助手在上一节我们了解到了如果来自定义一个助手。助手通常是一些在模版中随时都可能用到的简单逻辑。Ember提供了一些助手来帮你减轻一些开发的工作量。这些助手会帮你通过更动态的方式来给其他的助手或者组件中传值。通过助手来动态得到属性{{get}}助手可以帮你轻松把变
2017-06-25 00:33:12 185
翻译 #9 异步路由
英文原版:https://guides.emberjs.com/v2.13.0/routing/asynchronous-routing/本节涵盖了一些router的高级功能,即异步逻辑处理能力。聊聊PromisesEmber的router在处理异步逻辑的时候大量使用了Promise。简而言之,promise是表示最终结果的对象。一个promise可以被完成(即 resolve)或被拒绝( 即 re
2017-06-21 22:01:47 2465
翻译 #1 Handlerbars 基础
英文原版:https://guides.emberjs.com/v2.13.0/templates/handlebars-basics/Ember使用 Handlebars templating library来支持用户接口。Handlerbars模版包括惊天的HTML和动态的Handlerbar表达式。Handlerbar表达式中动态的内容通过数据绑定技术来渲染。这就是说,当你更新某个Ember对
2017-06-20 10:33:02 583
翻译 #7 Loading/Error 子状态
英文原版:https://guides.emberjs.com/v2.13.0/routing/loading-and-error-substates/Ember Router允许你提供一个读取数据时的反馈–loading状态,同样也提供了error状态。loading 子状态在beforeModel,model和afterModel钩子函数的执行过程中,数据同时也是需要通过消耗一些时间来读取的。典
2017-06-18 21:41:16 745
翻译 #6 阻止和重启路由
英文原版:https://guides.emberjs.com/v2.13.0/routing/preventing-and-retrying-transitions/在路由转换期间,Ember Router会把一个transition对象传入route中每一个被调用的钩子函数。任何一个钩子都可以通过与此transiton对象交互,并使用transition.abort()方法来立即终止当前的tra
2017-06-18 20:41:13 283
翻译 #5 重定向
英文原版:https://guides.emberjs.com/v2.13.0/routing/redirection/有些时候你会想要把用户从他们要访问的页面重定向到另一个页面。比如,如果用户没有登录成功,你可能会想要阻止他们编辑个人的认证信息,资料或者查看购物车等。通常你会将用户重定向到登录页,并且仅在用户成功登录后,才允许用户访问那些页面。Ember允许你通过路由中的钩子函数或方法控制这个交互
2017-06-15 22:23:13 273
翻译 #4 渲染模板
英文原版:https://guides.emberjs.com/v2.13.0/routing/rendering-a-template/路由的另一个职责就是渲染对应的模板。默认的,路由处理程序会渲染与其同名的模板。看下面这个路由:app/router.jsRouter.map(function() { this.route('posts', function() { this.rout
2017-06-13 23:22:51 290
翻译 #3 给路由分配模型
通常,你可能会需要通过模板来展示从model中获得的数据。读取正确的模型数据是路由的职责之一。比如,下面这个路由:app/router.jsRouter.map(function() { this.route('favorite-posts');});为了从favorite-posts路由中读取数据,你需要通过model()钩子函数来达到目的:app/routes/favorite-posts
2017-06-13 22:50:14 299
翻译 #2 定义路由
英文原版:https://guides.emberjs.com/v2.13.0/routing/defining-your-routes/当你开始运行你的app时,router会将当前的URL与你定义路由相匹配。这些路由呢,则会负责显示模板,读取数据并且更新app状态。定义路由,命令:ember generate route route-name这个命令创建了个一个路由源文件:app/routes/
2017-06-12 22:59:28 291
翻译 #1 介绍
英文原版:https://guides.emberjs.com/v2.13.0/routing/假设,我们现在正在编写一个用来管理论坛的web app。任何时候,我们应该能对于问题“大家都在关注哪些帖子?他们正在编写帖子吗?”给出答案。在Ember.js中,这些问题的答案都取决于URL。URL可以通过以下几种方式来设置:用户第一次读取页面。用户手动的更改的URL,例如点击后退按钮、直接编辑地址栏
2017-06-12 21:51:00 203
翻译 #8 枚举
Ember中,一个枚举是指有一系列子对象的对象,并且你可以使用Ember.EnumerableAPI来操作它们。 大部分情况下,你遇到的枚举是在app中的javascript数组,并且它已经在Ember中被继承了原型。通过用来处理枚举的标准接口,Ember.js允许你在不更改app其他部分代码的前提下,彻底的改变你底层数据的存储方式。枚举API最大化的支持了ECMAScript标准。这使得ember
2017-06-11 21:14:48 208
翻译 #7 绑定
英文原版:https://guides.emberjs.com/v2.13.0/object-model/bindings/不同于其他框架的实现的绑定,Ember.js中的绑定可以用于任何对象。同时对于Ember使用者来说,计算属性是优先推荐的解决方案。最简单的添加双向绑定的方式是使用computed.alias():husband = Ember.Object.create({ pets: 0
2017-06-10 21:16:21 232
翻译 #6 观察者
英文原版:https://guides.emberjs.com/v2.13.0/object-model/observers/【注】观察者很容易被Ember新手滥用。由于观察者本身就比较耗性能,所以在面对大多数情况时,推荐使用计算属性。观察者支持观察任何属性,包括计算属性。观察者其实就是一个监听器,它能反映出其他属性的变化。当你需要在观察目标完成同步操作后做些事情,那么它尤其有用。
2017-06-08 22:39:23 167
翻译 #5 计算属性与数据集合
有时候你的计算属性它所依赖的是个数组。比如,你有个todos属性,它是个对象数组。这时候你想基于对象的isDone属性统计一下有个对象符合条件。@each为了扶持你,Ember提供了一个@each关键字:app/components/todo-list.jsexport default Ember.Component.extend({ todos: null, init() { thi
2017-06-07 23:22:54 351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人