Editing the resume content

[00:00 - 00:07] We have seen how to render data from the data object in a previous lesson. Now we enable the user to change this data.

[00:08 - 00:12] We will learn two more directives in view. We model and we on.

[00:13 - 00:20] View provides a very useful directive. We model with which we can display as well as edit input data.

[00:21 - 00:35] We model sets the value attribute of an input element to the value it is tied to. At the same time, if the user inputs something, this would override the default value and the data object.

[00:36 - 00:45] This is often referred to as two-way data binding. Without the vModel directive, we would do the data binding and the updating in two steps.

[00:46 - 00:55] With vBind, we can retrieve the value from the data property and display it. But we also want our input to get registered and update the state.

[00:56 - 01:04] For that, we would need an event listener that listens to the input event. It should then update the value according to the input.

[01:05 - 01:15] The way to add event listeners in view.js is with the vOn directive. You write vOn colon and then the event you want to listen to.

[01:16 - 01:28] The value of this directive is the event handler. When the user types or makes changes to the input's value, the myEventHandler method, a new view component, will be called.

[01:29 - 01:41] You can use this to capture the user's input, process it, and perform actions based on the changes and the input field. Remember how the vBind directive can be abbreviated with the colon?

[01:42 - 01:51] The vOn directive can be abbreviated with an add sign. Just like in vanilla JavaScript, we can write the event listener in line if we want to.

[01:52 - 02:07] To update the value of the name property on input, we can use the following event handler. The vModel directive is pretty neat and makes our life a lot simpler.

[02:08 - 02:22] It can be used on input, text, area, and select elements. So one approach would be to convert all of our text into input elements and take advantage of the ease of the vModel directive.

[02:23 - 02:39] Let's test this out by converting the first headline into an input element. Of course, we would have to change the styling of the input element for this to make it look like a headline again.

[02:40 - 03:01] For this, we could remove the background and the border. [silence] What we cannot fix is that an input element is only one line known.

[03:02 - 03:13] It cannot break and continue into the next line. It is best to keep the non-input elements, so h4, in the case of headlines, and add content editable true to it.

[03:14 - 03:28] We cannot use vModel on these non-input elements, but we can get the same functionality with vBind and in eventless mode. Let's add content editable true to the heading and see what happens.

[03:29 - 03:40] A box renders around the text when we click on it. We can edit the text in the box, and if we hit enter, we see that the box would also span across lines.

[03:41 - 03:50] If we lose the focus, our input remains visible. The data object still needs to be updated.

[03:51 - 03:55] I will show you what I mean. Let's print out the current value of headline 1.

[03:56 - 04:18] You see, it does not get updated automatically. If we use an input element with vModel, it does update.

[04:19 - 04:35] That is because the vModel directive updates the data object. To achieve this functionality for our non-input elements, we need to add an event listener that updates the data property of the data object.

[04:36 - 04:50] As a reference point, this code is equivalent to vModel. For a non-input element, the difference is that the text is not the value of the element but the inner text.

[04:51 - 05:06] Therefore, we need to access it with event.target.innerText instead of with event.target.value. If you have the View Chrome extension installed, you can see the value update in there.

[05:07 - 05:24] As we can see, the data property updates. Using a different browser than Chrome, the input event might not work as expected.

[05:25 - 05:37] That is because some browsers move the cursor to the beginning of the element after each character is typed, which can disrupt the typing experience. Let me demonstrate this to you and Firefox.

[05:38 - 05:47] If I type here, you can see the cursor jumps to the beginning. To prevent this, you can use the Bloor event instead.

[05:48 - 06:15] This way, the event fires once the element you are editing loses focus, which means that the data you type gets saved once you click somewhere adds. To follow along from a browser other than Chrome, please use the Bloor event instead of the input event whenever we make text editable.

[06:16 - 06:34] If you want to use the build and code editors, please make sure to use the Chrome browser to avoid these cross browser differences. Now that we have figured out how to edit the data by keeping the rendering of the non-input elements, let's apply it to all headlines.

[06:35 - 06:49] Instead of repeating the inline event handler for each headline, moving this logic into a function makes sense. We do this in view by adding the methods property to the object.

[06:50 - 06:57] The methods property contains an object with methods. Our event handler should be placed in there.

[06:58 - 07:38] In our method, we want to set the value of the specific headline to the inner text of the DOM node that fired this event. Let's call this method update headline. In the template, we will replace the inline handler and copy the same over to all headlines. To pass the event to the handler, you need to use view special event variable, $ event, and the declaration of the method, you can name the parameter whatever you like.

[07:39 - 08:15] We only have to replace the in-next argument. [silence] Our data object has many properties that we want to be able to edit through the DOM.

[08:16 - 08:26] Creating a method for each of them would be very tedious. Let's create general purpose methods.

[08:27 - 09:05] We will be able to use this method for the intro text, the name, and the title. [silence] We also have values that are less deeper than one level.

[09:06 - 09:20] The phone number, for example, is accessible via this.contact.phone. Specific skill is accessible via this.skills, records, and decks.

[09:21 - 09:39] For these nested properties, we need a separate method. We are only sometimes dealing with arrays. For example, the contact section is an object.

[09:40 - 09:56] Therefore, I want to use general parameter names here. With key one, we can access any property of the data object, and with key two, either access by index if the value is an array or by property name.

[09:57 - 10:26] For the contact section, that would look like this. [silence] Whenever we iterate over an array, we have the advantage of just having to update one line.

[10:27 - 10:58] This helps us in the skills and highlight section. [silence] It seems that we have forgotten to move the hard-coded highlights into a data property in the previous lesson. Let's make a little exercise out of this.

[10:59 - 11:15] To review the previous lesson, edit data property with the name highlights to the data object. It should contain at least two entries. Next, render the entries dynamically, and make them editable just like we did for the skills section.

[11:16 - 12:24] Pause the video now and try it out yourself. [silence] [music] [music] [music] [music] [music] [music] [music] [music] [music] [music] [music] [music] ♪♪♪ Now we can test it out in the template.

[12:25 - 12:52] I will open the view extension to check if the value editing works. ♪♪♪ Great.

[12:53 - 13:05] We can see that the values in the data object update. On the right side, if we look at how the experience area is structured, we see that we cannot use the same method here.

[13:06 - 13:26] To access the text value and the data property, we need the key experience, the index to the object and the experience array, and the key to the property of this object. Instead of creating a method that takes four arguments, it is more readable to create a method specifically for experience.

[13:27 - 13:39] Let's call this method update_experience. ♪♪♪ Let's add this to the template.

[13:40 - 14:16] We split the company name and location into two separate elements so we can edit it properly. ♪♪♪ To edit the description points, we need to go one lever deeper so we can reach the value and the description array.

[14:17 - 14:23] Let's create a method for this as well. Index one accesses the specific experience object.

[14:24 - 14:48] In index two, the specific description string and the description array. ♪♪♪ We make sure to give the index variable a different name for the inner v4 iteration so that we can access both index values in our method.

[14:49 - 14:57] And there we have the finished experience section. For the education section, we follow the same logic.

[14:58 - 15:13] We create one method, update_education, for updating property in one of the education objects. For this, we need to access the array with an index and the property with a key.

[15:14 - 16:11] ♪♪♪ ♪♪♪ We would also need a method to update an entry and the description array, just like we did for the experience section. ♪♪♪ Right, we took care of all the text.

[16:12 - 16:34] Let's try it out in the browser and check the View DevTools that everything updates. ♪♪♪ I think this would be your .....this would help me to do it.