|Language:||English, Spanish, Portuguese|
|Genre:||Fiction & Literature|
|Distribution:||Free* [*Register to download]|
I'll leave you to persist it to a backend or use local Storage. Go ahead and create your app directory. In the root directory, create an index. Also create css, and js folders within the directory. Inside the js directory, go ahead and create the collections, models and views directories. Populate the index. Wilson', avatar: ' We have three template-type scripts. One for displaying the list of employees, another for editing and creating new employees and one for displaying the link for creating new employees.
Furthermore, we referenced jquery, underscore and backbone libraries. We also linked some views and script files that do not exist yet. We'll create them soon.
Finally, there is a startup function, EmployeeManager. You'll understand how this works in a couple of minutes.
Next, open up the models directory and create an employee. In our app, we are not persisting anything so our model will be very simple.
Next, create an employees. Create The Views We'll have three views.
One view for handling the list of employees, one view for the details of each employee and one view for adding employees. Let's get started. This is the element that houses the employee detail. The render function ensures that the right data is appended to the template and displays on the page. The onClickDelete function is for removing the data from the model and collection.
The events object simply maps the onClickDelete function to the click event of the delete-employee button. Next, create the add employee form view. Create a file, employeeForm. Collections: Collections are simply a group of models together.
Backbone also provide the possibility of creating the ordered set of models i. Backbone ease up this problem by providing an abstraction over the HTML elements i. Backbone view are like observers on some HTML. We can define the HTML and associate with a view. The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data. The HTML is totally separate from the view object.
It can be associated with the view object either directly or via some templating engine hang on tight, we will get to see all these in action in due course of time. Routers: Even though we want to create a single page web application, requirements might dictate the need of copying, bookmarking the URLs.
Why this Article series So the idea behind writing this tutorial series is to understand backbone. This article is mainly to get the user acquainted with the backbone. Later we will create a complete application to understand all these concepts.
In the very later stages we will look at Marionette. This plugin makes it much more easier to create backbone applications.
Also from the architectural perspective backbone. However, after , backbone. How to set up environment for BackboneJS?
Explain by following a step by step approach. Create a new folder with the name same as project name. Create a file called index. For each components there will be a folder for models, a folder for collections and a folder for views and html templates.
Create folder for assets.