Implementing List Feed Feature

by Ruchita Rathi

Last week I completed the list feed feature for the readlater app.
Currently, on page load, the app shows list of all the feeds that were saved for reading later like so:

List Feed Feature

List Feed Feature

 

I faced couple of glitches while developing this feature:

1. The items were being fetched from the DB but were not getting rendered. Turns out I was not attaching the elements to the UL.

2. Issues with deferred calls. So I wrote the following logic to ensure that the items are attached only after all of them are pushed to the items array.

showData();
 showDataDone();
 $.when( showData(), showDataDone() ).done(function() {
 alert( 'Deferred success' );
 })
 .fail(function() {
 alert( 'Deferred fail' );
 });

3. Issues with using the correct CSS class for rendering the icons. With help from brantje and LEDFan, I was able to add the images for star, edit, and delete from the CSS like so:

.icon {
 padding-left: 25px;
 background-repeat: no-repeat;
 height: 16px ; 
 width: 16px; 
}
.star-icon {
 background-image: url('../img/star.png');
}
.edit-icon {
 background-image: url('../img/rename.png');
}
.delete-icon {
 background-image: url('../img/delete.png');
}

Once I had these classes defined, I could use the icons with any other element as a background image.

Advertisements