Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.9 Working With Arrays and Lists

In this lesson, I’ll show you the ListView UI component so that you can include arrays of data in your templates. I’ll also show you how to work with observable arrays, to keep the interface responsive.

Related Links

2.9 Working With Arrays and Lists

Welcome back. So far we have learned how to create views, navigations, modules, and so forth. The goal of this last is to teach you how to handle list and erase. The process is very similar to previous pages. So if we try to focus on goals of this video instead of repetition. Like before, we start with creating files on the repos folder, respos.xml for the view, repos.js for login, and repos-view-model.js for AVVM. First we'll begin by repos.xml. I have copied and paste the code here to only explain the new parts. First in line four, I have edited the navigation button so that user can go back to previous screen and event name is unback button. Next from line 11 to 17, I have edited a stack layout container. And since this is a list page I have use a UI component called, ListView. It has one attribute called Items, and it could be the name of the array that if you're going to pastorate it. Then to create each of this item we can use ListView.itemTemplate deck. In your example, we are just going to show the name of each item with the label element. But you might have images or other elements that you want to utilize. You should put them inside ListView.itemTemplate. The label element in your example only takes a text attribute. Which is a name of the item and text attribute to cover all text. And we have added a class attribute with a title value. As simple as it can be this is all required for the view of this script. Next it's time for start. Go to app.css and paste this code, that is it for the view layer of this script. Next we go to the Repos.js to update the logic, as you can see it is similar to the profile. First we have the imported the view model module, frame and dialog modules. Next we have created the local variable called repos, and instantiated it with a new repovm method. Next we create loaded method. In it's body we have created the page variable and added repos to the binding contacts of the page. On line 15, we have created the onlogout module which is exactly the same as the one in the profile view. And the last method is on back button, and the address is set to go back to profile view. It is worth mentioning that there is a simpler version as well, to go back to previous screen, and that is topmost().goback(). Now back to repos-view-model file. We will spend some time to understand how it works for this view. First, we import Observable module. Next, to work with arrays we need to import ObservableArray module. And then ConfigModule, and finally http module because, we are going to call another endpoint to retrieve some information about the user's repositories. Next we are going to store the user credentials, then userData, and next url, which should be constructed. Configmodule.reposurl and we use JavaScript reject replace method to replace username with userdata.login. Our last one is a data, which is a new ObservableArray object. We've got empty array passed to it, very good, now we create a function we call Repos, and pass params to it. Next, we create a view model variable which is an observable and it has only one parameter, repose array. Which we passed data to it. This is the same property that you pass to list view UI component. Okay, now it's time for our back end request, let me copy and paste this code and explain what it does. URL, this is the URL that we have constructed on line eight, method is GET, headers is an object. Authorization and the type is Basic. And encoded credentials. HTTP module returns a promise. First we check for a status code, if it is 200, it means it is okay. Then we push the json format of response.content object, because the response are in a string format, they should convert them to a JavaScript notation, and for the error would show an error code, couldn't access the list. Finally, we should return to viewModel and export the module. Now let's save and try it again. Very nice, as you can see, everything works as expected, and also back button works properly as well. And this was our last screen of this simple application. I have to mention, for such a small application it is fine to have redundant code across the application code base. But in the real world, production-ready application as much as possible. Something like HTTP module, or navigation, or dialog can be extracted into one short code base.

Back to the top