![Models
App.PRODUCTS = [
{
title: "Flint",
price: 99
},
{
title: "Kindling",
price: 249
}
];
• Database data
• Implement CRUD on Models
by:
Method 1:
Implementing AJAX callbacks inside your routes
Method 2:
Rely on Ember-Data](https://image.slidesharecdn.com/introtoemberjs-161019021428/85/Intro-to-emberjs-11-320.jpg)
![Adapters
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.PRODUCTS.FIXTURES = [
{
title: "Flint",
price: 99
},
{
title: "Kindling",
price: 249
}
];
• FixtureAdapter
1. Perfect for testing Ember and Ember-Data.
2. Load records from memory.](https://image.slidesharecdn.com/introtoemberjs-161019021428/85/Intro-to-emberjs-24-320.jpg)
![제 19회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [백발백준] : 백준봇 : 컨테이너 오케스트레이션 기반 백준 문제 추천 봇](https://cdn.slidesharecdn.com/ss_thumbnails/random-240209055922-328cce98-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Intro to emberjs (20)
Ad
Recently uploaded (20)
Intro to emberjs
- 1. Front-End Engineer Mandy Intro to Ember.js
- 2. Outline • What is Ember • How to use • Ember • Summary
- 3. What is Ember • JavaScript MVC • Designed for Single Page Applications • Currently at version 1.8.1
- 4. History • Created by Yehuda Katz, a member of the jQuery, Ruby on Rails and SproutCore core teams. • Initial release: 2011 • Sproutcore 1.0 > Amber.js > Ember.js
- 5. Dependencies • JQuery • Ember.js • Handlebars.js • - (i.e. Ember’s templating engine) • Ember-Data • - (i.e. Ember’s data-persistence abstraction layer)
- 6. Ember Core Concepts • Model • Router • Controller • Template
- 8. Model Route Controller View Template Loads Renders Renders Set model on Set state on Ember.js Workflow Set state on Browser Event
- 9. How to use ?
- 10. The Ember Application var App = Ember.Application.create ({ LOG_TRANSITIONS: true }); • Ember Application • render App template
- 11. Models App.PRODUCTS = [ { title: "Flint", price: 99 }, { title: "Kindling", price: 249 } ]; • Database data • Implement CRUD on Models by: Method 1: Implementing AJAX callbacks inside your routes Method 2: Rely on Ember-Data
- 12. Router and Routes App.Router.map(function(){ this.route("index", {path: "/"}); this.route("products", {path: "/products"}); }); • Routes Router Routes • Router : • Translates a path into a route. <ul> {{#link-to 'index' tagName='li'}} Home {{/link-to}} {{#link-to 'products' tagName='li'}} Products {{/link-to}} </ul> JavaScript HTML
- 13. Defining your routes URL Route Name Controller Route Template N/A N/A ApplicationController ApplicationRoute application / index IndexController IndexRoute index /products products ProductsController ProductsRoute products This router will generate exactly this: App.Router.map(function(){ this.route("index", {path: "/"}); this.route("products", {path: "/products"}); });
- 14. Router and Routes App.ProductsRoute = Ember.Route.extend({ model: function(){ return App.PRODUCTS; } }); Route: • Auto-generated by Ember.js if you don’t declare them. • Query the model to use for the current route. • Set properties in controllers.
- 15. Controllers App.ProductsController = Ember.Controller.extend({ //do something action… }); • Auto-generated by Ember.js if you don’t declare them. • Makes the bridge between the model and the view or template. • Provides properties for the template.
- 16. Views App.ProductsView = Ember.View.extend({ templateName: 'products' }); • Auto-generated by Ember.js if you don’t declare them. • The visual parts that the user can see in the browser. • Handling user event/dispatch logic.
- 17. Why handlebar • view data • <div> Migo </div> <div> {{title}} </div>
- 18. Handlebars Template (HTML) <div class=“body”> {{body}} </div> Context (JavaScript literal or JSON) Compile Handlebars Template HTML Source Output + { body:”My name is Mandy.” } var template = Handlebars.compile(source); <div class=“body”> My name is Mandy. </div>
- 19. Templates • A template is the view’s HTML markup. • Uses the Handlebars.js. • Prints the model data and automatically updates itself when the model changes.
- 20. Templates <script type = "text/x-handlebars" data-template-name = "application"> <div class = "navbar">...</div> <div class = "container"> {{outlet}} </div> </script> <script type = "text/x-handlebars" data-template-name = "index"> <h1>Index Page</h1> <div>{{title}}</div> </script> <script type = "text/x-handlebars" data-template-name = "products"> <h1>Product Page</h1> {{#each}} <div>{{productName}} : {{price}}</div> {{/each}} </script>
- 21. Templates <div class = "navbar">...</div> <div class = “container"> {{outlet}} </div> <h1>Product Page</h1> {{#each}} <div>{{productName}} : {{price}}</div> {{/each}} <h1>Index Page</h1> <div>{{title}}</div> application / /product
- 22. Ember Data Network Adapter Store Application find( ) find( ) XHR returns XHR Promise Resolves with JSON Promise Resolves with record
- 23. Store App.ProductsRoute = Ember.Route.extend({ model: function () { return this.store.find("products"); } }); • The store holds data loaded from the server (i.e. records). • Routes and controllers can query the store for records. App.Product = DS.Model.extend({ title: DS.attr("string"), price: DS.attr("number") });
- 24. Adapters App.ApplicationAdapter = DS.FixtureAdapter.extend(); App.PRODUCTS.FIXTURES = [ { title: "Flint", price: 99 }, { title: "Kindling", price: 249 } ]; • FixtureAdapter 1. Perfect for testing Ember and Ember-Data. 2. Load records from memory.
- 25. Adapters App.ApplicationAdapter = DS.RESTAdapter.extend({ //do something… }); • RESTAdapter 1. The default adapter in Ember-Data. 2. It lets you perform GET, PUT, POST and DELETE requests over a REST API.
- 27. Ember Charts
- 28. • • • • • • • •
- 29. Compare Approach DIYer convention over configuration HTML for apps not pages Dependencies JQuery Underscore JQuery Handlebars None weight (base) 6.4kb 235kb 81kb Data-binding not supported supported supported Testing No default test solution QUnit Karma
- 30. Summary • •
- 31. Reference • Ember Official Site • Handlebars Official Site • codeschool • An In-Depth Introduction To Ember.js • Ember101