- 浏览: 2542850 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
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/
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/
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 236MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 728Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1188Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 940MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 626AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 11052018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 6022018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5522018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 6012018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 578Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1308Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 719Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 607Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 805Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 632Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 661Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 877Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 766Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 474Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1111ReactJS(5)Composition vs Inheri ...
相关推荐
下面将详细介绍emberjs的模板渲染及其相关概念。 1. **Router中的renderTemplate方法** `renderTemplate`方法是路由(Route)中的关键函数,它负责在路由切换时渲染对应的模板(Template)。例如,通过`this....
7. **社区支持和生态系统(Community and Ecosystem)**:Ember.js拥有活跃的社区和丰富的生态系统,包括大量的插件和附加组件,这些可以帮助开发者解决各种问题并扩展框架的功能。 文件“emberjs_git”可能包含了...
在前端开发领域,AngularJS、BackboneJS和EmberJS是备受推崇的三大JavaScript框架,它们各自具有独特的特性和优势。本文将深入探讨这三个框架的介绍、差异以及适用场景。 首先,AngularJS是由Google开发并维护的...
Ember.js是一款JavaScript框架,用于构建雄心勃勃的Web应用程序。Ember.js以其约定优于配置的设计原则和一套强大的开发工具而闻名。本文将详细介绍Ember.js用户指南中涉及的入门知识点和概念。 ...
emberJS脚手架 市面上vue和react的样例代码都比较多,ember资源反而比较少。 进入此代码目录 直接使用命令 "ember s" 即可进入开发状态。 编译生产代码命令 "ember b --env production
ember-js-docker EmberJs的Docker映像支持的标签和相应的Dockerfile链接如何使用这张图片该映像安装了EmberJs和Chrome,从而有助于测试,运行和构建EmberJs应用程序。在您的项目中创建一个Dockerfile将以下...
在vs2012,vs2010下使用 Emberjs 分层结构
演示应用本自述文件概述了与此Ember应用程序进行协作的细节。 此应用程序的简短介绍可以轻松地转到此处。先决条件您需要在计算机上正确安装以下物品。 (带有NPM)安装git clone 此存储库切换到新目录npm install ...
1. **EmberJS 框架基础** EmberJS 强调约定优于配置,这意味着开发者在开始项目时可以遵循一套明确的规范,而无需过多的初始化设置。框架的核心特性包括路由器、数据管理(通过 Ember Data)、以及组件系统,这些都...
website, emberjs.com 源 网站 Ember.js 项目的网站。要开始:git clone https://github.com/emberjs/website.gitcd websitebundlebundle exec midd
Emberjs异步按钮使用此组件,您可以避免在一个按钮或链接中多次单击,直到操作完成或触发超时样例代码{{#async-button action="action1" timeout=5000 class="btn-default" param1="PARAM1" param2=parambound}}Call...
1. **Ember对象的格式化**:该插件能够将Ember对象以更友好的方式展示出来,包括显示对象的类型信息,如 Ember.Object 或 Ember.Controller。这使得开发者可以迅速识别出对象的类别,从而理解其在应用程序中的角色。...
1. **Ember CLI**:EmberJS 的命令行工具,用于初始化项目、生成组件、路由、模型等,它是 EmberJS 开发的标准入口。 2. **Router 和 Routes**:EmberJS 中的路由系统是应用程序的核心部分,它处理 URL 变化并映射...
const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); // 添加立方体到场景 scene.add...
3. **目录结构**:EmberJS项目通常包含app、config、node_modules、public、tests等核心目录。其中,`app`目录存储应用的组件、模型、控制器、路由和视图;`config`存放配置文件;`node_modules`是依赖库的存放地;`...
EmberJS验证器的集合 安装 ember install ember-validators 有用的网址 需要帮助吗? 如果是错误,。 用法 验证器可以单独导入并按原样使用 import validatePresence from 'ember-validators/presence' ; import ...
1. **路由系统**: EmberJS 的路由是应用程序的导航核心,它将URL与特定的视图和模型关联起来。通过`Router.map`方法,我们可以定义不同的路由路径和对应的处理函数,实现页面的动态加载和导航。 2. **模型...