❅ Then we change the elements to the input form elements that we edit ❅ To make them editable we store the values of the data’s HTML first
BACKBONE JS EACH UPDATE
❅ Hide the Edit and Delete buttons and show the Update and Cancel ❅ To create the edit function, need to add display:none at first because we are not using it until after it is clicked ❅ The first event to listen for is when the edit button is clicked which we already created a class for in the HTML file
BACKBONE JS EACH CODE
❅ For the edit button – going back to the single View after initialize we add a list of Events – Events bind things like user clicks or mouse-overs to the code ❅ The following steps will achieve the Update and Delete functionalities. ❅ The add functionality is now working for the app. ❅ Need to add return this for the scripts to work ❅ Also need to clear the forms when finished with. ❅ Now every time we create a contact, we take the Contacts collection and add contact which should trigger the ContactsView initialize function from before and render the page. ❅ For the element add-contact, when it is clicked it will run the function ❅ Now we can create document ready code at the bottom of our scripts file so that when the document is finished loading it will go to run the code here ❅ We then add a button for adding the contacts ❅ The input classes will be form-control with input for each column ❅ Since we are listening for a new contact to be added, we will create an input box to do that under thead in the HTML file. ❅ We will append a new table row that is a BlogView that is a blog Model for that element _each goes through each of the contacts so we pass in the array ❅ Render function will first clear the this.$el ❅ Initialize will make it so that every time a contact is added we will render the View and give it context ❅ For the ContactsView, the model is contacts, el is contacts-list ❅ We use this.$el.html of this.template that will be inserted from the model to JSON. ❅ Now we add a render function in the scripts file, so we can render the contacts ❅ Added a warning, edit, cancel, and delete button ❅ For the template in the HTML, we inject the data within td spans using ❅ We want to access the HTML of this template ❅ Back to the scripts file, we put the template that we created ❅ Under the container div we add a template ❅ Need to create the template in the HTML file ❅ Initialize function uses an underscore template ❅ The tagName is ‘tr’ so that each new contact will have an individual table row. ❅ For the individual view, model is a new Contact so that when we create a new Contact, the View will use that. Return to your HTML file and create a in your table, with a class of contacts-list, and add s ❅ We will want to put the ContactView and ContactsView in a tbody in the HTML. ❅ We will create two views – one will be for each individual contact that we create and the other will be for all of the contacts collectively.
❅ The next thing we will create are Views – views receive information about the data change and changes accordingly. ❅ We now instantiate a Collection that will be like an array that contains the contacts that we instantiated the step before. ❅ Can instantiate contacts as follows (commented out as we did not use it in our example)
❅ The url would be used if we have a database to connect to for storing all of our data, which would require more knowledge outside the scope of our project (such as MongoDB, Mongoose, etc.) ❅ Now we create a Collection – a Collection groups Models together (like a JavaScript array) ❅ ContactList is one of our classes that extends Backbone.Model – can provide default values (we did not). ❅ Start by creating a Model – a model is where data is presented on the client side. js file – we will begin to create our Backbone scripts. ❅ Create your desired columns by defining a table (we used Name, Phone#, E-mail and Action) ❅ Create a div with class container for the app ❅ We included Bootstrap for our app in order to have a standard template and to be able to use certain functions. ❅ Create your standard HTML template and load in the CDNs. For our demonstration purposes, we used Method 2 where we added the code into our HTML file.
BACKBONE JS EACH DOWNLOAD
❅ Follow to download or configure Backbone into your code. Today, our goal is to teach you to use Backbone for your simple app in order to create a contact list. Welcome to our short Backbone.js Tutorial!
0 kommentar(er)
