哪位用过 Ember.js 框架的_百度知道
哪位用过 Ember.js 框架的
我有更好的答案
emberjsrails深度整合emberjs思想先进建议前端深入解
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁您已经赞过此文了。
配置Ember.js
发表时间：浏览量：1873评论数：0挑错数：0
## 禁用基于原型的扩展默认情况下，Ember.js 以下列方式对原生的JavaScript对象进行基于原型的扩展：* `Array`被扩展用来实现。。。。。接口。此举填补了本来不支持 ECMAScript 5 数组方法的浏览器的空白，为数组增加了便捷方法和属性，同时使数据的变化可观察。* `String`被扩展了诸如`camelize()`和`fmt()`的便捷方法。* `Function`被扩展了将方程注解为计算属性的方法，此方法为`property()`，还扩展了将方程注解为观察者的方法，这些方法为`observes()`或`observesBefore()`方法。这就是Ember.js增强原生原型的范围。我们仔细权衡了改变这些原型的利弊，推荐多数Ember.js开发者能使用这些扩展。这些扩展显著地减少了必须输入的样板文件代码量。然后，我们也理解有时你的Ember.js程序会嵌入到一个你不能控制的环境中。经常是嵌入到其他页面中的第三方JS代码，或是将应用一块一块地迁移到更先进的Ember.js架构中来。那些情况下，你不能或不想修改原生的原型，Ember.js允许你彻底关闭上面所说的扩展。只要将`EXTEND_PROTOTYPES`标志为设为`false`即可。需要注意的是，上面的代码必须在Ember.js加载`之前`运行。如果你在Ember.js之后设置了此标志位，那么原生的原型就已经被修改过了。### 没有基于原型的扩展的情况要想程序正常运作，你得手动扩展或创建对象，与之前创建对象的过程一样。#### 数组原生数组不再继续实现监控自身变化所需的功能。如果你关闭了基于原型的扩展并且试图在模板的`{{#each}}`等助手方法中使用原生的数组的话，Ember.js就没办法检测到数组的内容变化，模板也不会随着数组的变化而自动更新。另外，你试图将`Ember.ArrayController`的内容设置为普通的原生数组时，Ember.js会报一个异常，因为原生数组已然不再继续实现`Ember.Array`接口了。当然你可以将原生数组强制转换成实现了必需接口的数组，只要你使用`Ember.A`这个便捷方法就可以了。#### 字符串字符串不再拥有[Ember.String API reference.](/api/classes/Ember.String.html)中描述的便捷方法。然而，你可以使用`Ember.String`对象的名称类似的方法并将字符串作为第一个参数传进来：#### 函数用`puted()`方法来包裹函数以标记计算属性。用`Ember.observer()`来标记观察者：
来自无觅插件
还没有人赞过这篇文章
(C) 2015 yeeyan.org
公司全称：北京译言协力传媒科技有限公司
京ICP备号&&京公网安备99号Ember.js 模板预编译的学习笔记-js教程-网页制作-壹聚教程网Ember.js 模板预编译的学习笔记
今天在做一个项目时需要用到Ember.js进行模板预编译了，当时对这个不了解后来找到一站长博客写的一文章非常的不错，下面整与各位共享。
Ember.js 里，如果把模板直接写在 index.html 文件中，是这样写的：
&script type=&text/x-handlebars& data-template-name=&application&& // 最顶级的模板
{{outlet}}
&script type=&text/x-handlebars& data-template-name=&index&&
&script type=&text/x-handlebars& data-template-name=&user&&
{{outlet}}
&script type=&text/x-handlebars& data-template-name=&user/index&&
打开 index.html 网页时，Handlebars.js 会即时编译1模板内容。如果要提高应用速度，则可以把模板文件分离出去，然后预编译。
我们建一个 templates 目录，专门放置 handlebars 模板。以上面的代码说，模板从主页面分离如下：
&& application.hbs
&&& index.hbs
&&& user.hbs
&&& user/index.hbs
注意，第四个 index.hbs 是放在 user 子目录下的，另外，.hbs 文件中不需要 &script&...&/script& 这样的标签，只需把 script 标签对之间的内容拷入 .hbs 文件。
预编译的工作可以交给 grunt ember templates ，相应的 Gruntfile.js 配置部分如下：
emberTemplates: {
& compile: {
&&& options: {
&&&&& templateBasePath: 'app/templates/'
&&& files: {
&&&&& 'app/scripts/templates.js': 'app/templates/**/*.hbs' // 将 tempaltes 目录下所有的 hbs 文件一同编译到 scripts/templates.js 文件中
& emberTemplates: {
&&& files: 'app/templates/**/*.hbs',
&&& tasks: ['emberTemplates']
命令行下运行 grunt emberTemplates 就可以预编译，之后在 index.html 文件中引用 templates.js 文件：
&script type=&text/& src=&scripts/templates.js&&&/script&
原文来自:陈三博客
上一页： &&&&&下一页：相关内容当前访客身份：游客 [
走进 Ember.js
英文原文：
There are a lot of JavaScript libraries available, and most are really good at providing the traditional DOM-centric interactions that your typical websites need. But when it’s time to build a manageable code base for a single-page app, that’s where a whole suite of new frameworks come in to smooth things out.
The old saying is true: “Use the best tool for the task.”
It’s not that traditional libraries like jQuery can’t help you build desktop-like experiences, it’s just not the use-case for it and is missing things like data-binding, event routing and state management. Sure, you can probably cobble together a bunch of plugins to achieve some of that functionality, but starting with a framework that’s been specifically built from the ground up to tackle these specific problems, in my opinion, makes more sense. The old saying is true: “Use the best tool for the task.”
I recently did an it was motivated by my desire to get to know what I’ve come to call “the new hotness”: .
其它翻译版本：1(点击译者名切换)
现在有很多的JavaScript库,大部分库都满足了你的网站有关DOM的操作。但是当前迫切需要去管理单个应用的代码,这就是为什么新的框架产生啦。
&古话说的好:刀要用在刀刃上。&
Ember.js不想传统的JQuery那样,不能给你很好的桌面体验,没有相关用列,缺少数据绑定,事件,状态管理。总的来说,你可能可以拼凑相关的插件去实现这些功能。但是,现在开始有专门的框架出现去解决这些专业问题。以我看来,是多么完美的事情啊。古话说的好:&刀要用在刀刃上。&
我最近采访了Ember.js团队;那是多么的让人激动人心,去知道了解最新的,最热的:Ember.js
Ember fits the bill for what I’ve described above, and does so in a fashion that reminds of a lot of how jQuery allows developers to get up and running quickly. The team has purposely taken steps to abstract a lot of the complexities inherent in designing and building Model/View/Controller based applications using years of expertise and knowledge gained from building large-scale apps.
What I’d like to do is help get you up to speed with Ember.js, via a multi-part article series which will gradually introduce you to the concepts of the framework. We’ll start off with the usual intro (which happens to be this post), and then gradually ramp up to building a full application. The great part is that this will also help me reinforce the concepts that I’ve already learned, and maybe pick up some new techniques along the way! I’ll do my best to have the Ember.js team review this material for accuracy and perhaps even contribute some nuggets to it.
Before we continue, a heads up: Ember.js does a lot of magic for you. There are times when you’ll look at the code and say “Huh? How’d it do that?” I’ve been there and I’ll do my best to distill things, but I’m not going to dive into the bowels of Ember’s framework code. Instead, I’ll discuss how you can leverage its tools and API to build your app.
So let’s kick this off.
Ember实现了我上面已经描述的功能,它如此的流行让我想起JQuery怎么让开发者快速的入门 。团队在设计方法,采取措施并抽象了很多复杂性和依靠在大型应用多年的实践经验,建立了模型/视图/控制器在应用方面。
通过多部分文章的介绍(它会逐渐介绍这个框架的核心概念),我想要让你加快了解Ember.js。
开始我们以普通的介绍(这篇文章就有介绍),逐渐去创建完善一个完整的项目。通过我对有些概念理解,我想让你去加强一些核心概念的理解。通过这种方式,并且可能学习到一些新的技术。我已经尽自己最大的可能让Ember.js团队的评审这篇文件的可能性和准确性,并提出一下宝贵的意见。
在我们开始之前,有一句话：Ember.js对我来说做了这么多神奇的事情。当我有时候看见代码,自言自语到:&哇,这是怎么做到的啊.&我在这里尽我最大的可能去介绍,但是我不会深入介绍Ember’s框架的源代码,我将会讨论如果通过它的API和工具去创建你的应用。
因此,我们开始那一步把。
Core Concepts
Ember.js is not a framework for building traditional websites.
The first thing to keep in mind is that Ember.js is not a framework for building traditional websites. Libraries like jQuery and MooTools are a great fit for that. If you’re considering Ember.js, then the assumption is that you’re looking to build desktop-like experiences – especially scalable ones. In fact, the slogan for the framework is &a framework for developing ambitious web applications& which tells you it’s clearly not your daddy’s JavaScript library.
I mentioned previously that Ember leverages the MVC pattern for promoting proper code management and organization. If you’ve never done MVC-based development, you should definitely read up on it. Nettuts+ has a . For those of you familiar with the concepts, you should feel at home. The one thing I’ve heard consistently is that making the shift from Backbone to Ember.js is actually easy because Ember does a lot of the heavy lifting for you, while still maintaining the code organization patterns that those developers are accustomed to.
Ember.js对传统网站来说并不是一个单纯的框架
第一件事最好牢记心中,Ember.js对传统网站来说不是一个单纯的框架。JQuery和MooTools对传统网站来说更适合。如何你考虑Ember.js,你的关注点是可扩展的桌面体验。事实上,框架的口号创建一个完美的Web的应用,这就清楚的告诉你这不是一个Javascript父框架。
我原先提到Ember利用了MVC模式,有利于代码的管理和组织。假如你从来没有MVC开发基础,首先你要读懂这个的概念。Nettuts+上面有很多很好的文章对这个主题。当你熟悉了这些概念,你会一目了然。,我常常听说将后台改造成Ember.js事实上非常简单的一件事情。因为Ember已经做了很多繁重的事情为你,但是开发者必须已经习惯代码结构啦
Ember also relies on client-side templates… a LOT. It uses the
which provides expressions that allow you to create dynamic HTML-based templates. An Ember developer can bind data to these embeddable expressions and dynamically change the display of their app on the fly. For example, I can create a template that can receive an array of people and display them in an unordered list:
{{#each people}}
&li&Hello, {{name}}!&/li&
Notice the “#each” expression that works as a loop directive, enumerating over each element of the “people” array and replacing the “{{name}}” expression with an actual value. It’s important to note that the double brackets are tokens used by Handlebars to identify expressions. This is a small example, and we’ll dive into more detail later.
Handlebars is an incredibly powerful client-side templating engine and I would recommend reviewing not only , but the
to get a full grasp of the options available. You’ll be using it quite a bit.
Ember同样也依赖客户端模版...有很多。它使用了
模版框架,通过一系列表达式,这个框架可以为你创建动态的HTML页面。对这些嵌入式的页面表达式,Ember开发者能够绑定数据,并且快速动态改变它们的展示。举个例子来说,我创建一个模版,能够接受一个people的数组和并且无序的展示它们：
{{#each people}}
&li&Hello, {{name}}!&/li&
注意：&#each&是一个循环表达式,列举每一个&people&数组元素,并且替代了&{{name}}&这个表达式用一个真正的值。重要的一点需要注意是{{}}语法是由Handebars去验证表达式的。这是一个简单的例子,我以后会深入详细的介绍它。
Handlebars 是一个强大的客户端模版引擎。我推荐不仅仅是查看向导,而且它自己本身的起获取充分有用的信息。你会很好的使用它。
Setting up Ember
Ember.js relies on additional libraries, so you’ll need to go grab a copy of
and . But, wait, didn’t I say that jQuery and Ember play in different spaces? Well, yeah I did, but here’s the thing: the Ember team is all about not reinventing the wheel. They chose jQuery to do what it does best: work with the DOM. And that’s a good thing, since jQuery is really good at that. It’s also why they went with Handlebars, which is an excellent templating library that happened to be written by Yehuda Katz, who is an Ember core team member.
The easiest way to get the files you need is to go to the Ember.js Github repo and pull down the . It’s a boilerplate for you to start off with. At the time of this writing, it contains:
Ember 1.0 RC1
Handlerbars 1.0 RC3
jQuery 1.9.1
Eember.js 依赖传统的类库例如
但是稍等一下,难道我不是说过JQuery和Ember运用在不同的地方吗?是的,我说过。但是这里有一些情况,Ember团队不想再去重复创建轮子了.他们选择JQuery,因为JQuery是最好的方式去操作DOM,这是一件相当完美的事情.同样的道理,他们为什么去选择Handlerbars,因为它是一个相当不错的模版,有Yehuda Katz来是实现,他是Ember的核心开发人员之一。
通过Github依赖库这个,我们可以通过非常简单的方式去抓取到我们需要的Ember.js。这是一个简单开始的例子。到目前位置,它包含
Ember 1.0 RC1
Handlerbars 1.0 RC3
jQuery 1.9.1
There’s also a basic html template that is coded to include all of the associated libraries (jQuery, Ember, etc.) and along with an example of a Handlebars template and “app.js”, which includes code for kicking off a basic Ember app.
&script src=&js/libs/jquery-1.9.1.js&&&/script&
&script src=&js/libs/handlebars-1.0.0-rc.3.js&&&/script&
&script src=&js/libs/ember-1.0.0-rc.1.js&&&/script&
&script src=&js/app.js&&&/script&
Just note that app.js isn’t part of the framework. It’s a plain ole JavaS you can name it anything you want. And, while we’ll use it for the purposes of this tutorial series, down the road, you’ll likely end up splitting your JavaScript into multiple files just like you would for any other site or app. Also, Ember doesn’t expect a specific directory structure for your framework files.
When you look at the Starter Kit code, it may look like your typical website code. In some respects, you’re right! Once we start organizing things, though, you’ll see how building an Ember app is different.
现在有一个基本的html页面模版,它包含所有相关的框架(JQuery，Ember等)。并且包括一个Handlebars例子和一个基本的Ember的应用,这个应用叫&app.js&。
&script src=&js/libs/jquery-1.9.1.js&&&/script&
&script src=&js/libs/handlebars-1.0.0-rc.3.js&&&/script&
&script src=&js/libs/ember-1.0.0-rc.1.js&&&/script&
&script src=&js/app.js&&&/script&
注意:app.js不是这个框架的一部分。它仅仅是一个Javascript文件,你可以任意的命名它。在使用的时候,我们仅仅用它来当作例子。你可能分离JavaScript文件为多个文件在你的网站和应用里面。同样的道理,对框架文件来说,Ember不希望有一个专门的目录结构。
当你刚开始看代码例子时候,它看起来像传统的网站代码。在某些方面,你是对的!一旦我们组织某些事情的时候,你将会感觉Ember应用是不一样。
The Lay of Ember Land
Before you start hacking at code, it’s important to understand how Ember.js works and that you grok the moving parts that make up an Ember app. Let’s take a look at those parts and how they relate to each other.
Templates are a key part of defining your user interface. As I mentioned previously, Handlebars is the client-side library used in Ember and the expressions provided by the library are used extensively when creating the UI for your application. Here’s a simple example:
&script type=&text/x-handlebars&&
&h2&&strong&{{firstName}} {{lastName}}&/strong&&/h2&
Notice that the expressions are mixed into your HTML markup and, via Ember, will dynamically change the content displayed on the page. In this case, the {{firstName}} and {{lastName}} placeholders will be replaced by data retrieved from the app.
Handlebars offers a lot of power, via a flexible API. It will be important for you to understand what it offers.
在我们开始编写代码前,理解Ember.js工作原理是非常重要的。你聚集相关模块组成你的Ember应用。让我们看看其它部分和他们之间的相关联系。
对你的接口来说,模版是一个关键的部分。&正如我原先提到的, Handlebars是一个客户端框架被用在Ember里面。对你的应用来说,表达式可以扩展,当你创建界面的时候。&这里有一个简单的例子:
&script type=&text/x-handlebars&&
&h2&&strong&{{firstName}} {{lastName}}&/strong&&/h2&
注意：通过Ember,表达式组成了HTML页面,可以动态的改变页面的内容。在这个例子中, {{firstName}} 和 {{lastName}} 占位符在应用中将会被数据替代。
通过灵活的API,Handlebars 可以提供强大的功能。它提供什么功能对你来说是非常重要。
An application’s Router helps to manage the state of the application.
An application’s Router helps to manage the state of the application and the resources needed as a user navigates the app. This can include tasks such as requesting data from a model, hooking up controllers to views, or displaying templates.
You do this by creating a route for specific locations within your application. Routes specify parts of the application and the URLs associated to them. The URL is the key identifier that Ember uses to understand which application state needs to be presented to the user.
App.Router.map( function() {
this.route( 'about' ); // Takes us to &/about&
The behaviors of a route (e.g.: requesting data from a model) are managed via instances of the Ember route object and are fired when a user navigates to a specific URL. An example would be requesting data from a model, like this:
App.EmployeesRoute = Ember.Route.extend({
model: function() {
return App.Employee.find();
In this case, when a user navigates to the “/employees” section of the application, the route makes a request to the model for a list of all employees.
一个应用的路由帮助管理应用的状态
一个应用的路由帮助管理应用的状态和相关资源需要被用户导航。路由可以包含相关任务例如从模型中获取数据,转化控制去视图,或者展示模版。
在你的应用中,你能够创建一个路由为特定的坐标。路由指定应用的部分和URLs相关去它们。URL是关键标识符,Ember判断哪个应用状态需要展现给用户通过它。
App.Router.map( function() {
this.route( 'about' ); // Takes us to &/about&
当用户导航专门的URL的时候,Ember实例化路由管理着路由的行为(例如:从模型请求数据)。一个例子从模型请求数据,像这样：
App.EmployeesRoute = Ember.Route.extend({
model: function() {
return App.Employee.find();
在这个例子中,当用户导航应用&/employees&这个栏目时,路由会发出请求到模型获取到所有雇员的信息
An object representation of the data.
Models are an object representation of the data your application will use. It could be a simple array or data dynamically retrieved from a RESTful JSON API, via an Ajax request. The
library offers the API for loading, mapping and updating data to models within your application.
Controllers
Controllers are typically used to store and represent model data and attributes. They act like a proxy, giving you access to the model’s attributes and allowing templates to access them to dynamically render the display. This is why a template will always be connected to a controller.
The main thing to remember is that, while a model retrieves data, a controller is what you’ll use to programmatically expose that data to different parts of your application. While it may seem that models and controllers are tightly coupled, in fact, models, themselves, have no knowledge of the controllers that will use them later on.
You can also store other application properties that need to persist but don’t need to be saved to a server.
一个对象数据展示。
在你的应用中,模型被应用作为一个对象的数据展示。它可以是一个简单的数组格式,数据可以通过AJAX请求动态的从RESTful JSON API获取到。在你的应用中,&&框架提供了载入,映射和更新数据去模型。
控制常常被用作存储和替代模型数据和属性。它们常常扮演代理角色,给你有访问模型属性的权限和允许模型去访问他们和展示他们。这就是为什么模型常常被用作去控制相关。
最主要的一件事情要记住,当模型抓取数据的时候,控制自动暴露了相关你应用的数据。这样似乎看起来模版和控制非常的紧密。事实上,模型,它们也没有相关知识,只是对控制来说,会在以后使用到。
你能够存储你的应用属性并将需要的持久化,而且不必要被保存到服务器上。
Views in Ember.js are meant to manage events around user interaction and translate them into events that have meaning within your application. So, if a user clicks on a button to delete an employee, the view is responsible for interpreting that native browser click event and processing it appropriately within the context your application’s current state.
Naming Conventions
One of the ways that Ember.js helps to minimize the amount of code needed and handle things for you behind the scenes is through naming conventions. The way that you define and name your routes (and resources) impacts the naming of your controllers, models, views and templates. For example, if I create a route, called “employees”:
App.Router.map( function() {
this.resource( 'employees' );
I would then name my components, like this:
Route object: App.EmployeesRoute
Controller: App.EmployeesController
Model: App.Employee
View: App.EmployeesView
Template: employees
在Ember.js里面,视图管理着事件。当用户和应用之间互相交互时,视图转换它们,是它们能够让应用清楚的事件。所以,假如用户点击了删除Employee的按钮,视图就是解析了这个点击按钮并且处理它在应用当前的的状态中。
Ember.js 通过命名约定这种方式方式,最少的节约代码的缩写。你定义路由(资源)的方式影响了控制,模型,视图和模版的命名。例如,我创造route,叫做&employees&:
App.Router.map( function() {
this.resource( 'employees' );
我将要命名我的组件,像这样：
路由对象: App.EmployeesRoute
控制: App.EmployeesController
模型: App.Employee
视图: App.EmployeesView
模版: employees