`
sillycat
  • 浏览: 2542850 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

EmberJS(1)Installation and First App

    博客分类:
  • UI
 
阅读更多
EmberJS(1)Installation and First App

Make sure my node version is 0.12.+, I was using 0.11.+, it is not working with that version.

Some Error Message from libtool during installation
libtool: unrecognized option `-static'
Try `libtool --help' for more information.
make[1]: *** [/Users/carl/install/node-v0.12.2/out/Release/libcares.a] Error 1
make: *** [node] Error 2

Solution:
Do which -a libtool, disable the customer one, it will works. But I wrongly delete the system one. So I tried with libtool 1.5 and 2.4 and 2.4.6 version. But all of them are not working.

http://nodejs.org/dist

Instead, I download the binary file from here http://nodejs.org/dist/v0.12.2/node-v0.12.2-darwin-x64.tar.gz

Install EmberJS
> npm install -g ember-cli
> npm install -g phantomjs

Create new Project
> ember new easyember

Templates
Expressions {{firstName}}, Outlets {{outlet}}, Components, reusable parts

Router
Models
Route
tell the template which model it should display

The Application load defaults
app/app.js
app/controllers/application.js
app/templates/application.hbs
app/routes/application.js

app/templates/application.hbs
<h1>{{appName}}</h1>
<h2>{{title}}</h2>

app/routes/application.js
export default Ember.Route.extend({
setupController: function(controller) {
// `controller` is the instance of ApplicationController
controller.set('title', "Hello world!");
}
});

app/controllers/application.js
export default Ember.Controller.extend({
appName: 'My First Example'
});

Simple Routes
Install ‘Ember Inspector’ on chrome, go to chrome://extensions, check the allows checkbox.

here is the application.hbs
<h1>{{appName}}</h1>
<h2>{{title}}</h2>
{{outlet}}

Here is the favorites.hbs to foreach all the title
<ul>
{{#each item in controller}}
<li>{{item.title}}</li>
{{/each}}
</ul>

Here is the routes, routes/favorites.js
import Ember from 'ember';
import $ from 'jquery';

export default Ember.Route.extend({
model: function() {
// the model is an Array of all of the posts
// fetched from this url
return $.ajax('http://localhost:5000/tasks');
}
});

It will automatically load the Ember.ArrayController since the $ajax return an Array.

Error Message:
Refused to connect to 'http://localhost:5000/tasks' because it violates the following Content Security Policy directive: "connect-src 'self' http://sillycat.ddns.net ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report"

Solution:
https://github.com/rwjblue/ember-cli-content-security-policy
Change the config/environment.js as follow:
var ENV = {
modulePrefix: 'easyember',
environment: environment,
baseURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},

APP: {
// Here you can pass flags/options to your application instance
// when it is created
},
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self' https://sillycat.ddns.net",
'font-src': "'self' http://sillycat.ddns.net",
'connect-src': "'self' http://sillycat.ddns.net http://localhost:5000", // Allow data (ajax/websocket) from api.mixpanel.com and custom-api.local
'img-src': "'self'",
'style-src': "'self' 'unsafe-inline' http://sillycat.ddns.net", // Allow inline styles and loaded CSS from http://fonts.googleapis.com
'media-src': "'self'"
}
};

Dynamic Segments
router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
location: config.locationType
});

export default Router.map(function() {
this.route('favorites');
this.route('post', {path: '/posts/:post_id'});
});

routes/post.js
import Ember from 'ember';
import $ from 'jquery';

export default Ember.Route.extend({
model: function(params) {
return $.ajax('http://localhost:5000/tasks/' + params.post_id);
},

serialize: function(post) {
return { post_id: Ember.get(post, 'id') };
}
});

post.hbs
{{#each item in controller}}
<p>
{{item.title}}
</p>
<p>
{{item.desc}}
</p>
{{/each}}



References:
http://guides.emberjs.com/v1.11.0/ember-cli/glossary/
https://github.com/emberjs/ember.js/
http://www.emberjs.cn/guides/
https://github.com/tastejs/todomvc/tree/gh-pages/examples/emberjs

http://guides.emberjs.com/v1.11.0/templates/the-application-template/
https://github.com/jbdemonte/sample-express-ember-gulp
http://guides.emberjs.com/v1.11.0/concepts/naming-conventions/

分享到:
评论

相关推荐

    emberjs的模版渲染

    下面将详细介绍emberjs的模板渲染及其相关概念。 1. **Router中的renderTemplate方法** `renderTemplate`方法是路由(Route)中的关键函数,它负责在路由切换时渲染对应的模板(Template)。例如,通过`this....

    Emberjs js的前端mvc框架

    7. **社区支持和生态系统(Community and Ecosystem)**:Ember.js拥有活跃的社区和丰富的生态系统,包括大量的插件和附加组件,这些可以帮助开发者解决各种问题并扩展框架的功能。 文件“emberjs_git”可能包含了...

    三大框架AngularJS、BackboneJS和EmberJS对比.pdf

    在前端开发领域,AngularJS、BackboneJS和EmberJS是备受推崇的三大JavaScript框架,它们各自具有独特的特性和优势。本文将深入探讨这三个框架的介绍、差异以及适用场景。 首先,AngularJS是由Google开发并维护的...

    EmberJs User Guide

    Ember.js是一款JavaScript框架,用于构建雄心勃勃的Web应用程序。Ember.js以其约定优于配置的设计原则和一套强大的开发工具而闻名。本文将详细介绍Ember.js用户指南中涉及的入门知识点和概念。 ...

    emberJS脚手架.zip

    emberJS脚手架 市面上vue和react的样例代码都比较多,ember资源反而比较少。 进入此代码目录 直接使用命令 "ember s" 即可进入开发状态。 编译生产代码命令 "ember b --env production

    ember-js-docker:EmberJs的Docker映像

    ember-js-docker EmberJs的Docker映像支持的标签和相应的Dockerfile链接如何使用这张图片该映像安装了EmberJs和Chrome,从而有助于测试,运行和构建EmberJs应用程序。在您的项目中创建一个Dockerfile将以下...

    在vs2012下使用 Emberjs

    在vs2012,vs2010下使用 Emberjs 分层结构

    emberjs-demo-app:学习灰烬

    演示应用本自述文件概述了与此Ember应用程序进行协作的细节。 此应用程序的简短介绍可以轻松地转到此处。先决条件您需要在计算机上正确安装以下物品。 (带有NPM)安装git clone 此存储库切换到新目录npm install ...

    Flint-Store:另一个 EmberJS 项目

    1. **EmberJS 框架基础** EmberJS 强调约定优于配置,这意味着开发者在开始项目时可以遵循一套明确的规范,而无需过多的初始化设置。框架的核心特性包括路由器、数据管理(通过 Ember Data)、以及组件系统,这些都...

    website, emberjs.com 源.zip

    website, emberjs.com 源 网站 Ember.js 项目的网站。要开始:git clone https://github.com/emberjs/website.gitcd websitebundlebundle exec midd

    emberjs-async-button:EmberJS的组件,可避免在触发操作时多次单击按钮

    Emberjs异步按钮使用此组件,您可以避免在一个按钮或链接中多次单击,直到操作完成或触发超时样例代码{{#async-button action="action1" timeout=5000 class="btn-default" param1="PARAM1" param2=parambound}}Call...

    用于辅助Emberjs开发的ChromeDevTools插件

    1. **Ember对象的格式化**:该插件能够将Ember对象以更友好的方式展示出来,包括显示对象的类型信息,如 Ember.Object 或 Ember.Controller。这使得开发者可以迅速识别出对象的类别,从而理解其在应用程序中的角色。...

    emberjs-jogging:EmberJS 的每日提交

    1. **Ember CLI**:EmberJS 的命令行工具,用于初始化项目、生成组件、路由、模型等,它是 EmberJS 开发的标准入口。 2. **Router 和 Routes**:EmberJS 中的路由系统是应用程序的核心部分,它处理 URL 变化并映射...

    emberjs-webgl-component-exp:使用threejs进行简单立方体渲染的emberjs组件

    const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); // 添加立方体到场景 scene.add...

    emberBlog:使用 EmberJS 构建

    3. **目录结构**:EmberJS项目通常包含app、config、node_modules、public、tests等核心目录。其中,`app`目录存储应用的组件、模型、控制器、路由和视图;`config`存放配置文件;`node_modules`是依赖库的存放地;`...

    ember-validators:EmberJS验证器的集合

    EmberJS验证器的集合 安装 ember install ember-validators 有用的网址 需要帮助吗? 如果是错误,。 用法 验证器可以单独导入并按原样使用 import validatePresence from 'ember-validators/presence' ; import ...

    emberjs-geting-started:学习 EmberJS

    1. **路由系统**: EmberJS 的路由是应用程序的导航核心,它将URL与特定的视图和模型关联起来。通过`Router.map`方法,我们可以定义不同的路由路径和对应的处理函数,实现页面的动态加载和导航。 2. **模型...

Global site tag (gtag.js) - Google Analytics