EmberJS Intro

Transcript

2. WHAT IS EMBER Client-side JavaScript application framework based on the MVC pattern. • Router • MVC • Components • Convention over configuration
3. ROUTER • Translates a URL into a series of nested templates • Manages application state • Keeps the URL up-to-date ROUTE • tells the template which model it should display
4. // app/router.js var Router = Ember.Router.extend({}); Router.map(function() { this.route('articles'); }); // app/routes/articles.js export default Ember.Route.extend({ model: function () { return this.store.find('article'); } });
5. MODEL • defines the properties and behavior of the data • stores persistent state STORE • central repository of records in your application • created for you automatically • shared among all of the objects
6. // app/models/article.js import DS from 'ember-data'; export default DS.Model.extend({ title: DS.attr('string'), author: DS.attr('string'), publishedAt: DS.attr('date'), published: DS.attr('boolean') });
7. CONTROLLER • stores application state • is more of a ViewModel or Presenter • used to decorate models with display logic ObjectController • wraps a single model ArrayController • wraps an array of models
8. // app/controllers/article.js export default Ember.ObjectController.extend({}); export default Ember.ArrayController.extend({});
9. TEMPLATES • Describes the user interface • Backed by a model • Used to be written in Handlebars • As of 1.10 HTMLBars is used CAN CONTAIN • HTML • Expressions {{title}} • Outlets - placeholders for other templates • Components
10. {{! app/templates/article.hbs }} <div class="article"> <h1>{{title}}</h1> {{#if date}} <span class="date">{{date}}</span> {{/if}} {{body}} </div>
11. COMPONENTS • custom HTML tag • behavior implemented using JavaScript • interface described using HTMLBars • you can pass data to components • wrap content in a component • components can send action to your app
12. // app/components/collapsible.js export default Ember.Component.extend({ tagName: 'collapsible', actions: { toggle: function () { this.toggleProperty('isExpanded'); } } }); {{! app/templates/components/collpsible-widget.hbs }} <div> <a {{action "toggle"}} > {{title}}</a> </div> {{#if isExpanded}} {{yield}} {{/if}}
13. {{! app/templates/index.hbs }} {{#collapsible-widget title="Some title"}} <h1>This content will show/hive<h1> {{/collapsible-widget}}
14. EMBER INSPECTOR
15. EMBER-CLI • Command line utility • Scaffolding a new app • Generators • Assets Compilation • ES6 Modules • Testings • Preconfigured to use QUnit • Addons
16. RESOURCES • http://emberjs.com/guides • http://www.ember-cli.com • http://emberweekly.com/