![View
On Application load ember creates Application view and parallel application template by default.
Creating View
App.CustomView = Em.View.extend({
classNames: [‘customView']
tagName : “span”
click : function (){
}
});
This code will create View class instance
{{#view App.CustomView}}
Custom View
{{/view}}
Rendering template view helper
Example : Defining view](https://image.slidesharecdn.com/emberpresentation-150106061354-conversion-gate01/85/Create-an-application-with-ember-25-320.jpg)
Create an application with ember
- 1. Ember Build an ambitious application By : Chandrasekar.G
- 2. What is Ember ? Ember is an open source javascript framework. Collection of libraries that are written in pure MVC architectural pattern.
- 3. Why Ember ? Avoid boilerplate codes . Creates a standard application architecture . Designed and developed to create and manage large web applications. Dynamic data bindings. Ember follows pure MVC Architectural pattern that Improves application testability . Keeps application codes modular.
- 4. Previous development In a Software Application , User interface get change often more than logics and data. Application might be have several parts / state ,So each state of application may have different layout , data displaying styles. So each time user navigate these things are get shuffle when application state change. In the previous programming development business logics and presentation logics are tightly coupled in the codes of JSP and JS files . Disadvantages
- 5. New development In the new development data logics , business logics and presentation logics are get separated with modular programming pattern. One the main benefit of the decoupling is application will have ability to develop an independent presentation application .
- 6. Architectural pattern Architectural pattern is a solution to solve design problem . Architectural pattern which gives the clear pictures about application system. It describes the subsystems and components of the application and relation between them. In software world which used to address different kind of issues such as :- Performance Security
- 7. Architectural patterns Model - View - Controller Model - View - Adapter Model - View - View Model Some list of architectural patterns which used in software applications.
- 8. MVC Overview Model The model component covers the list application parts :- Data. Set of rules to store data in structure. Logics and functions. View View component represents the model in different types such as Chart Pivot User customised view Controller The Controller component behaves like a mediator which sends the commands to View and Model. MVC software design pattern has divided as three components Model, View Controller.
- 9. MVC Good Explanation This explanation found on stackoverflow.com. View : "Hey, controller, the user just told me he wants item 4 deleted." Controller : "Hmm, having checked his credentials, he is allowed to do that... Hey, model, I want you to get item 4 and do whatever you do to delete it." Model : "Item 4... got it. It's deleted. Back to you, Controller." Controller : "Here, I'll collect the new set of data. Back to you, view." View : "Cool, I'll show the new set to the user now." By : Andres Jaan Tack
- 10. Software design layer Book for special offer Name Contact Address Submit Cancel ViewModel Controller Reset Form Update Form Cancel
- 11. Starting with Ember Requirements jquery.js ember.js handlebars.js ember-data.js
- 12. Understanding Ember Template In Ember, Template concept is used to define user interface of the application Router Router is an Ember class which manages the application state . View / Components View class is responsible for data binding with support of templates. One more option which provides that developer can implement DOM events for the user interactions . Model Model is a class that defines properties , structure and behaviour of the data. Controller Ember controllers usually consist the code to execute the tasks. Core concept of Ember
- 13. Template Template is basically a rear surface of model or presentation. One of the advantage of using template library is when the model get change template also get change automatically. Template engines are written in UI data binding software design pattern. Ember supports handlebars template engine by default , though which provides flexibility to use other templates engine such emblem and etc… . Dynamic UI data binding Some example Client side template engines Emblem Underscore JS template Mustache JS EJS Dust JS
- 14. Handlebars Handlebars JS takes the given HTML string and It’s own language syntax codes and compiles them to the javascript method. Handlebars JS is an extension of Mustache JS template engine and developed to supersede mustache JS. Logic-less template engine.
- 15. Using handlebars JS Defining simple handlebar template <script id=“template” type=“text/x-handlebars”> Welcome, <b> {{user.name}} </b> </script > “ {{ }} ” expression represents template model data as HTML Example : Simple handlebar template <script> var context = { user : { name : "Jack Sparrow"} } var templatecontent = $("#template").html(); var template = Handlebars.compile(templatecontent); $('body').append(template(context)); </script> Getting template by ID Compiler makes template function Passing the data as parameter in the template function
- 16. Handlebars Helpers Block Helpers Handlebars JS provide predefined block level expressions such as conditional statements and loops. Custom Helper Handlebars JS allows developer to create their own helper with option of resister helper Actions Helpers Handlebars actions helpers are mainly implemented to handle DOM events. Actions related codes will be maintain in the controllers. View Helper View helper is used to define template with help of view class .. will be cover on ember view Template Helpers There are three expression “ template “, “ partial ” and “render” which are used to includes specific template in the context . Outlet Outlet helper tells to render the route related template and allows to render child templates. Handlebars JS has some expressions for dynamic data binding
- 17. Using Block helpers <div class={{#if alreadyVisited}} "alreadyVisited"{{/if}} "notVisited"> {{name}} </div> Example : Conditional statements Conditional statements If, else, unless Each {{#each bookmarks}} ! {{/each}} <div class="visitedUsers"> <br> <b> Visited user</b> : {{#unless visitedUser.length}} No one visited yet this site {{else}} {{visitedUser}} {{/unless}} </div> Note : Else if conditions are not supported Example : Each in Handlebar
- 18. with with is a block helper which helps to change the context of the template . Example : "with" Block helper {{#with otherActivities}} {{sports}} <br> {{music}} {{/with}} Custom Helpers Handlebars.registerHelper("createController", function (string){ return string+"Controller = Em.Controller.extend({})"; }); Example : Custom Block helper Following below codes will create a new helper called creteController so developer can use In that template
- 19. Ember Application var App = Em.Application.create(); Creating Application Following code will create the instance of ember application. Application provides some default package of components. ! We can implement application view with the help of handlebar like following code ! <script type=“text/x-handlebars” > HTML code goes here </script> ! If we don’t mention any ID in It will render the application view . Basically It makes the body element as ember application .Instead of body element We can specify the Application view element with option of rootElement. var App = Em.Application.create({ rootElement : “main” });
- 20. Debug configuration LOG_STACKTRACE_ON_DEPRECATION : true, LOG_BINDINGS : true, LOG_TRANSITIONS : true, LOG_TRANSITIONS_INTERNAL : true, LOG_VIEW_LOOKUPS : true, LOG_ACTIVE_GENERATION : true {{debugger}} Following code will throw the error in template Get logs of specified layer {{log controller}} List of properties are available for logging
- 21. Router Ember router class store the application state in browser’s URL. Ember creates router object on application loads named App.Router. Routes classes are generates with ember UpperCamelCase convention. Application router comes by default with the set of route objects called IndexRoute and ApplicationRoute. ApplicationRoute will load in the all resource by default.
- 22. Router in Action App.Router.map(function(){}); App.Router loads IndexRouter and ApplicationRoute We can create routes with the option of “resource” and “route”. We can override IndexRouter and ApplicationRouter to make more functionality to the application. App.IndexRoute = Em.Route.extend({ init : function() { console.log("Index Route loading "); } }); App.ApplicationRoute = Em.Route.extend({ init : function() { console.log("Application Route loading "); } });
- 23. Defining Route App.Router.map(function(){ this.resource("users"); this.resource(“user",{path:"users/:id"}); }); This code will create users route This code will create dynamic segments Example : Route and Dynamic route So the generated routes are would be UsersRoute, UserRoute , So the application states are would be access through the URL 1. http://app/users/ 2. http://app/users/ 1
- 25. View On Application load ember creates Application view and parallel application template by default. Creating View App.CustomView = Em.View.extend({ classNames: [‘customView'] tagName : “span” click : function (){ } }); This code will create View class instance {{#view App.CustomView}} Custom View {{/view}} Rendering template view helper Example : Defining view
- 26. Ember Application view lifecycle Application Views Container Ember -Handlebar Handlebar compiler Metamorph <script > handlebars Renders HTML
- 27. Model Defining Ember model App.Info = DS.Model.extend({}); This code will create the model instance Defining attributes App.Info = DS.Model.extend({ name : DS.attr('string'), version : DS.attr('number'), author : DS.attr('string'), hasReleased : DS.attr(‘boolean’ , {defaultValue: false}) }); Defining data key and It’s type Setting default Example : Example model
- 28. Controller Ember JS controllers provides developer to write and present data with display logics . Defining action using controller 28 App.PipeController = Em.Controller.extend({ title : "Manage your pipes", actions : { pipeNow : function (){ console.log("You can pipe now ",this.get('pipeNow')); } }, }); Here the logic codes go Example : Example of Controller action
- 29. Basics ends here