Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Windows js 1
  • Overview
  • Transcript

3.5 Display the Titles Using Data Binding

WinJS is more than a UI library-we can use it to bind data to a control, too! We'll create data bindings in this lesson.

3.5 Display the Titles Using Data Binding

In the previous lesson we wrote all of the code necessary for downloading our feed. Now we just need to display our feed. And we're going to do this in two parts. In this lesson we are going to display all of the titles of the articles. And then in the next lesson we are going to display the actual articles themselves. So we're going to display the titles using a feature called data binding. We are essentially going to define a template. As to how we want the titles of the articles to be listed, and then we are going to use a list-view control. And bind our data to that list view. So that we don't have to write any other code, we just write the template, we write the control, and then we say control, here's your data, output everything. So, we're going to start with the HTML, and we are going to define our template as to how we want our titles to be displayed. So we're going to start with a div element. Let's give this a class of feed -title-template. And this is a control. This is a binding template. So we are going to use data-win-control-"WinJs.Binding" .template. Now this is just HTML. So, if we were going to start our application. And if we viewed the news page we would actually see this div here and everything that it contained. So we want to hide this, and we can do that by simply setting its display to none. So that it's a template, it's only there for templating purposes. Okay, so for our items we want to display the title, and we also want this to be somewhat flexible. So that if we ever need to change how we want to display this information we could always do that with minimal fuss. So let's create a div element that is going to contain everything that we would want to display about the title of an article. So let's give this a class of feed item. And this would be a container. And for right now, all that we are going to contain is the title. So let's have another class, or another div element. Let's give it a class of feed-item-title. And then this is going to contain the title. So let's use an h4 element. Let's set the class to win-h4. We're going to rely upon WinJS for the styling of this h4 element. And this is where we bind our data. We want to say that we want to take the title of each of our articles and use that tier for the value of this h4 element. So we use an attribute data-win-bind. And we are going to say that we want the textContent of this element to be bound to the title. Of our article, and that's it. That's our template. So, if we wanted to later on, if we had a image or something, we could also come in here and have another div element class of a feed item image, or something along those lines. This give us the flexibility to add things later on, if we wanted to do so. So, this is our templates, it's very simple and straight forward. Now we just need to define our list view control. Now, the list view control is aptly named because it's there for displaying a list of things. And it's also very flexible and that you can use. Is it for a variety of different purposes. One of those is a lot like a multi-lying select box. So that you could select one, or multiple items in the list view, but you can also use it to invoke a command. So that whenever you click or you tap on one of the individual items then a command is executed. And that is what we are going to do, so that whenever we click or tap on a title then that will take us to the actual article for that title. So let's create our list view. It's going to be a div element. I've given it an id of ListView, and let's also give it a class of win. -selectionstylefilled. And then we also want to say what type of control it is, so data-win-control, winJS.UI.ListView. And there's also some options that we want to set, so data-win Options. The first is the template that we want to use for our data. So basically we want to say that okay, we have this template here and whenever we bind data you're going to use this template for each item within our list. So, we want to select this element. And we've done this before with that select function. So the option or the property is called itemTemplate, and we use that select function, and then we pass in the selector that we want to select. So our item template is the element that has a class of feed-title-template. So that's the first thing. The second thing is the selection mode. And this is where we could say that we wanted to select one, or multiple items. In our case, we don't want to select any. So, we're going to set selection mode to none, but we also want to set the behavior of when we click or tap. On the items, within our list view, and we do that with the tap behavior option. And in this case, we want to invoke only. And then, finally is the layout. There are several different layouts that we can use, we can have the, well, there's really not several. There's two. There' a list layout, which is a vertical list, and then there's a grid, which is more horizontal. So in our case we want a list layout, so we're going to set layout equal to this other object that has a type property, and that type is WinJS.UI.ListLayout. Now these are the only options that we are going to set declaratively. There is another one that we could use called itemDataSource and this is the source of the items for this list view. But right now we don't have that because if you remember our list of items is going to be retrieved after the page is ready. So we don't have anything until that point, so we are going to have to access this list view control programmatically, and then set to that item data source here within our news.js file. So let's get rid of that item data source and this is really all that we need to do. For our news page except we do need to add a reference to that script file. So script src="news.js". Otherwise, nothing will work. And we are good to go here. So we can go back to our news.js file. Inside of the done handler for getFeedAsync we want to retrieve that listview. So, let's say var listView = and we will just retrieve that element with document.getElementById. It was listView and actually let's change this. I had an old habit of using camel casing and I've recently switched to just hyphenating both the class names and the ids, and sometimes I fall into my old habit. And I like the hyphenation much better that way there's no confusion between what is in the html and then what is in the JavaScript. So we're are retrieving the elements with an id of list-view but then we need the actual control object itself. And we have that with a property called winControl. So all of the elements that serve as a control have a property called winControl, and in this case this gives us that listView object. So that then we can come in here and say listView .itemdatasource and we can set that to our data source. Now, unfortunately we can't just say feed.articles. That would be really nice. But, that's not how it works. We have to create whats called a binding list. So, we new up winjs.binding.list and then we pass in our list, or our array of whatever it is that we want to create a binding list of, and that is our articles, and then this has a property. Called data source, now this is something else that I don't particularly like. This data source property. You would think that it would be enough to create a binding list and then assign that as the data source, but no. You have to create the binding list In that binding list has a property called data source and that is your data source for our list view. Well let's go ahead and run this, now we're not completely ready here for a variety of reasons. One we need to add some styling for our news page but also the data that we have. For our feed URL is not an actual URL. So we ran into this particular issue. Whenever we tried to create that URI object, well it can't because we don't have a URL. So let's wrap that In a try and catch. So, that's if we try to create the URI, then great if it works, but if not, then we want to go ahead and call The error. We will pass in the exception object and we will just return there. Now we don't have to do this here, but I am going to take out that declaration for URI and put that outside of the tri block. We could just do let in that case, and I should be using let, because let is the new var, and I know some people don't think that, but I do. It's just habit for me to type var. So if we don't have a valid URI, then we are going to call error and then return. So we need to handle that inside of news.js. So we have the done, but let's also add in the error handler as well. So function will say error here. And then we will display our error in a message box. So we want to create our message box equals new windows UI dot pop ups dot message dialog. And in this case we're just going to use that message property. And then we are going to display that with the show Async method. So let's run this again to test that. And we should see, something, although, that is not the case. Ex is undefined. And of course, I used error, instead of ex. So, let's just continue on through. So that we can change that and we'll just say error.message. So now, we should see our message that says that the parameter is incorrect, test is not a valid absolute URI. They're should be friendlier but for our purposes, that is going to be fine. So now that we know that our URI is not correct, we can change that with a valid URI for an RSS feed. And I have one for channel 9. So I'm just going to paste that in, save it, and whenever we go back to the news page. There we see our list of titles but it's kind of ugly. It also doesn't fill in the whole screen. We need to add some CSS. Let's close that. So inside of the news folder we want to add a new CSS file. Let's just call it news CSS. And I want to paste it in. Now it's very simple, there is a class for the feed title. The width is 100%, the height is 50 pixels, padding 5 pixels all the way around. The overflow is hidden, and then the display is set to flexbox. Now for the titles, they have a margin of 5 pixels all the way around. And then the list view has a height of 100%. So this is going to get us a little closer, but it's not going to quite be there. But before we run this, we need to add a reference to that CSS file. This is one of the things that I repeatedly forget to do. I'll create a new java script file and get it how I want it and I'll forget to add it to the page. And then nothing works and then I'm scratching my head thinking, what's going on. So always remember to add the references to the files. So if we run this, it's going to look a little bit better, but let's be Frank it's not going to look pretty because I am not a designer, but we can't scroll here. We can maximize the window and still can't scroll. So we need to add that and we can do that inside of the default CSS file. So, let's open that up. Let's scroll all the way down to the bottom. And we are going to add a class win-splitview-content. And we are going to save that overflow-y is auto. That is going to work. So, let's just refresh our Windows app and then everything is going to scroll just fine. And it is flexible, so as we increase the width or the height, everything just kind of adjusts there. But one thing, whenever we click on these items, nothing happens. But of course that is what we are going to do in the next lesson. Whenever we click on those items we are going to invoke a command, which is then going to take us to the full article.

Back to the top