01 2016 档案
摘要：1. 有时候，特别是当嵌套资源的时候，我们需要两个controllers之间的某种连接。让我们拿这个router当做例子： app/router.js var Router = Ember.Router.extend({}); Router.map(function() { this.route("
阅读全文
摘要：1. 一个controller的model可以代表几个记录也可以代表单个。这里，路由的model hook返回一个歌曲数组： app/routes/songs.js export default Ember.Route.extend({ model() { return this.store.fin
阅读全文
摘要：一、Controllers 1. 在Ember.js中，controllers允许你使用展现逻辑装饰你的models。通常，models将会有保存到服务器的属性，然而controllers将会有不需要保存到服务器的属性。 2. 例如，如果你正在创建一个blog，你想有一个BlogPost model
阅读全文
摘要：一、概述 当你通过和另外一个组件组合的时候，组件就会真正发挥它们的所有潜能。比如<ul>元素，只有<li>元素是适合作为它的子元素的。如果我们希望同样类型的行为，那么我们就必须组合组件。 就像我们组合HTML元素一样，我们可以以同样的方式用于组件。 app/templates/application
阅读全文
摘要：一、概述 1. 当一个组件在模板中被使用时，它具有发送action到这个模板的controller和routes的能力。当重大事件发生的时候，这些允许组件通知application，比如点击组件一个特殊的元素。 2. 像{{action}}Handlebars辅助器，来自组件的actions首先会去
阅读全文
摘要：1. 组件允许你定义可以在整个应用程序中重用的控件。如果它们够通用，它们也可以在被共享给其他人并且在许多应用程序中被使用。 2. 为了使一个可重用的控件有用，然而，你首先需要你的应用程序的用户和它交互。 3. 你可以通过使用{{action}}辅助器使组件中的元素可交互。这和应用程序template
阅读全文
摘要：一、概述 默认的，每一个组件都基于一个<div>元素。如果你在开发者工具中查看一个渲染的组件，你将会看到一个像这样的DOM表示： <div id="ember180" class="ember-view"> <h1>My Component</h1> </div> 你可以为你的组件自定义Ember生
阅读全文
摘要：1.有时候，你可能希望定义一个模板，它包裹其他模板提供的内容。 例如，假设我们创建一个blog-post模板，我们可以使用它来展现一个blog post： app/components/blog-post.hbs <h1>{{title}}</h1> <div class="body">{{body
阅读全文
摘要：1. 默认情况下，一个组件在它使用的模板范围中没有访问属性。 例如，假想你有一个blog-post组件被用来展示一个blog post： app/templates/components/blog-post.hbs <h1>Component: {{title}}</h1> <p>Lorem ips
阅读全文
摘要：一、概述 1. 为了定义一个组件，创建一个模板，它的名字以components/开头。为了定义一个新组件{{blog-post}}，例如，创建一个components/blog-post模板。 2.注意：在组件的名字中至少要有一个破折号。所以blog-post是可以接受的名字，audio-playe
阅读全文
摘要：1. HTML被设计的时候，浏览器是一个简单的文件浏览器。开发构建大的Web应用程序需要更多的东西。 2. 不是试图取代HTML，然而，Ember.js拥抱它，然后增加了许多新功能使得构建web应用程序现代化。 3. 目前，您仅限于创建由W3C所提供的标签，W3C正工作在自定义元素规范，这是一个好主
阅读全文
摘要：一、概述 在一个路由的跳转过程中，Ember路由器传递一个跳转对象到被跳转调用的路由的不同的hooks中。任何一个hook获取这个跳转对象，有能力通过调用transition.abort()终止跳转，并且如果跳转对象被储存，它可以通过调用transition.retry()稍后被尝试。 二、Prev
阅读全文
摘要：除了在上节中描述的技术，Ember路由器通过使用error和loading substates为自定义异步跳转提供强大而可重写的约定。 一、loading Substates 1. 在跳转过程中，Ember路由器允许你从各种各样的beforeModel/model/afterModel hooks中
阅读全文
摘要：本节介绍了路由器的一些更高级的功能和处理复杂异步逻辑的能力。 一、A word on promises 1. 在Ember的Router中Ember使用了大量的Promises概念来处理异步逻辑。简而言之，promises就是一个代表最终值的对象。一个promise可以fulfill(成功解析值）或
阅读全文
摘要：一、概述 1. 在URL中查询参数是可选的key-value对，出现在?的右边。例如，下面的URL有两个查询参数，sort和page，对应的值分别是ASC和2。 example:http://example.com/articles?sort=ASC&page=2 2. Query params允许
阅读全文
摘要：1. 默认的路由器使用浏览器的hash来加载应用程序的开始状态并且当你移动时同步保持。目前，这依赖于浏览器中存在的hashchange事件。 2. 假设下面的路由器，输入/#/posts/new将会把你带到posts.new路由。 app/router.js Router.map(function(
阅读全文
摘要：一、Transitioning and Redirection 从一个route调用transitionTo或者从一个controller调用transitionToRoute将会停止任何进程中的任何跳转并且开启一个新的，作为重定向功能。 transitionTo携带的参数和行为和link-to辅助
阅读全文
摘要：1. route handler一个重要的任务就是渲染合适的模板到屏幕。 2. 默认的，一个route handler将会呈现模板到最近的父模板。 app/router.js Router.map(function() { this.route('post'); }); app/routes/pos
阅读全文
摘要：1. 改变URL可能也会改变屏幕显示哪个模板。然而，如果它们有信息去显示，模板才是有用的。 2. 在Ember.js中，一个模板从一个controller检索信息去显示。 3. 为了告诉controller去展示哪个模板，在路由处理器的setupController hook中设置它的model属性
阅读全文
摘要：一、概述 应用程序中，templates被models支持。但是templates是如何知道它们应该显示哪个model呢？ 例如，你有一个photos模板，它是如何知道它该呈现哪个model呢？ 这就是Ember.Route工作的一部分。你可以通过定义一个和template同名的route来告诉模板
阅读全文
摘要：就像在routing guide中介绍的那样，不管什么时候你在路由器中定义一个新路径，Ember.js就会尝试寻找一个对应的route，controller，template，它们的命名都是根据命名约定的。如果没找到任何这些对象的实现，会为你生成合适的对象。 一、Generated Routes 假
阅读全文
摘要：一、概述 1. 当应用程序启动时，路由器负责显示模板，加载数据，另外还设置应用程序的状态。这是通过匹配当前URL到你定义的routes来实现的。 2. Ember app router中的Map方法可以被调用来定义URL映射。当调用Map时，你应该传递一个function，它将会被调用，this会被
阅读全文
摘要：一、Routing 1. 当用户与应用程序交互时，它会经过很多状态。Ember.js为你提供了有用的工具去管理它的状态和扩展你的app。 2. 要理解为什么这是重要的，假设我们正在编写一个Web应用程序来管理一个博客。如：是当前登录的用户吗？他们是管理员用户吗？他们在看什么？是设置屏幕打开？他们正在
阅读全文
摘要：一、概述 1. Helpers允许你向你的模板添加超出在Ember中开箱即用的额外的功能。辅助器是最有用的，用于将来自模型和组件的原始值转换成更适合于用户的格式。 2. 例如，假设我们有一个Invoice model，它包含一个totalDue属性，它代表那个invoice的总数。由于我们不希望我们
阅读全文
摘要：Ember提供几个辅助器允许你使用不同的方法渲染模板(render templates)。 一、The {{partial}} Helper {{partial}}以呈现的模板作为参数，并在这里呈现模板。 {{partial}}不改变上下文或作用域。它简单的将给定的模板放置到当前作用域中。 app/
阅读全文
摘要：一、Development Helpers Handlebar和Ember有好多个辅助器可以使模板开发更容易。 这些辅助器输出变量到浏览器的控制台，或者从模板中激活debugger。 二、Logging {{log}}辅助器可以很容易的将当前上下文中的变量或者表达式输出到你的控制台console中：
阅读全文
摘要：一、Input Helpers Ember中{{input}}和{{textarea}}是创建常规表单控件最简单的方法。 {{input}}包裹内建的Ember.TextField和Ember.Checkbox视图，然而{{textarea}}包裹Ember.TextArea。使用这些辅助器，你可以
阅读全文
摘要：一、The {{action}} Helper 你的应用程序通常会需要一种方法来让用户用控件交互改变应用程序状态。 例如，你有一个显示blog post的模板，并支持用额外的信息扩展post。 可以使用{{action}}去让一个HTML元素可点击。当用户点击这个元素，命名的事件将会被发送到你的应用
阅读全文
摘要：一、The {{link-to}} Helper 1. 使用{{link-to}}创建一个指向route的链接： app/router.js Router.map(function() { this.route("photos", function(){ this.route("edit", { p
阅读全文
摘要：1. 一个HTML元素的class属性可以像其他属性一样被绑定： Warning!生成的HTML Warning!2. 条件值如果你需要一个基于条件属性的class值，使用if： Warning!如果isUrgent是false，HTML： Warning!如果是true: Warning...
阅读全文
摘要：一、概述除了正常的文本，你可能还需要你的模板中包含的HTML元素的属性绑定到controller。1. 例如，设想controller有一个属性包含一个图片的URL: 生成的HTML： 2. 如果你绑定的是一个布尔值，它将会添加或者移除一个特定的属性。例如：如果isAdministrator是t...
阅读全文
摘要：一、 概述 1. example 如果你需要遍历一个对象集合，使用Handlebars的{{#each}}。 <ul> {{#each people key="id" as |person|}} <li>Hello, {{person.name}}!</li> {{/each}} </ul> 上面的
阅读全文
摘要：有时候你可能仅仅想展现模板的一部分，如果属性存在的话。 1. 我们可以使用{{if}}去有条件的渲染一块： {{#if person}} Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>! {{/if}} 如果传递的参数的值是
阅读全文
摘要：1. 当你的应用程序启动时application模板是默认被渲染的的模板。 2. 你应该把你的header, footer和其他任何的装饰内容放到这里。此外，你应该有至少一个{{outlet}}：它是一个占位符，路由器将根据当前的URL填入适当的模板。 3. example: app/templat
阅读全文
摘要：一、简介 Ember.js使用Handlerbars模板库来强化应用程序的用户界面。它就像普通的HTML，但也给你嵌入表达式去改变现实的内容。 Ember使用Handlerbars并且用许多新特性去扩展它。对于描述app的用户界面来说，它可以帮你考虑Handlerbars模板作为HTML就像DSL。
阅读全文
摘要：在Ember.js中，枚举是包含许多子对象的任何对象，并允许你使用Ember.Enumerable API和那些子对象一起工作。在大部分应用程序中最常见的可枚举是本地JS数组，Ember.js扩展到符合可枚举接口。 通过提供一个标准化的接口处理来可枚举，ember.js让你彻底改变存储的底层数据的方
阅读全文
摘要：有时候新用户在使用计算属性、绑定和监视者时感到困惑。下面是一些指导方针：1. 使用computed properties来合成其他属性，以构建新的属性。computed properties不应该包含应用程序行为，当被调用时，通常不会引起任何副作用。除了在罕见的情况下，多次调用相同的computed...
阅读全文
摘要：一个binding在两个属性之间创建一个链接，当一个改变时，另外一个被自动更新为一个新的值。 bindings可以在同一个对象中连接两个属性，或者用在两个不同的对象中。 不像大多数框架一样包含某种形式的绑定实现，在Ember.js中bindings可以被用于任何对象，而不仅仅是在views和mode
阅读全文
摘要：Ember支持监视任何属性，包括计算的属性。你可以使用Ember.observer为一个对象设置一个监视者： Person = Ember.Object.extend({ //these will be supplied by 'create' firstName: null, lastName:
阅读全文
摘要：1. 通常，你可能有一个计算的属性依赖于数组中的所有元素来确定它的值。例如，你可能想要计算controller中所有todo items的数量，以此来确定完成了多少任务。 export default Ember.Controller.extend({ todos: [ Ember.Object.c
阅读全文
摘要：一、What are computed properties? 1. 简而言之，计算属性让你声明函数为属性。你通过定义一个计算属性作为一个函数来创建一个，当你请求这个属性时，Ember会自动调用这个function。 之后你可以用同样的方法使用它，任何正常静态属性。 2. 对于获取一个或多个正常的属
阅读全文
摘要：1. 你不需要一开始定义一个类的全部内容，你可以通过使用reopen方法重新打开一个类并定义新的属性。 Person.reopen({ isPerson: true }); Person.create().get('isPerson') //true 2. 当使用reopen时，你也可以重写已经存在
阅读全文
摘要：一、Defining Classes(定义类) 1. 定义一个新的Ember类，调用Ember.Object上的extend()方法： example:定义了一个含有say()方法的新的Person类。 Person = Ember.Object.extend({ say(thing) { aler
阅读全文
摘要：一、Templates 使用Handlebars模板语言来描述程序的用户接口。每一个模板都有model的支持，如果model改变template就会自动更新。 Expressions: like {{firstName}} --从模板的模型获取信息并把它放入HTML中。 Outlets: 是其他模板
阅读全文
摘要：Ember.js使用一个运行时解析器去连接你的对象而没有很多样板文件。作为一个开发者，如果你把code放到约定好的位置这个解析器会自动工作。 一、The Application 1. 当你的app启动时，Ember.js将渲染application template作为主要模板。 2. 如果提供了c
阅读全文
浙公网安备 33010602011771号