Lets break down the pplication of Knockout.JS

  1. 1. The web application uses an api of dog breeds to display a random photo for the specific dog breed chosen.
  2. 2. There is a javascript file "site.js" which contains all the JavaScript code.
  3. 3. The JavaScript file controls all the UI elements on the web page.
  4. 4. In order to create the list of dog breeds, we created a div element that will hold all the items to be contained in the breeds list.
  5. 5. In the HTML file we went on ahead to label the div with an id attribute.
  6. 6. There is a data bind attribute that will be used to generate items in the div list.
  7. 7. The list will be populated with the array of data in the site.js file.
  8. 8. There is a viewmodel variable in the site.js file that is used to populate all the items in the list. Either the main list or the selection list.
  9. 9. The Knockout.js attribute will allow us to create the lists and bind all the items in the USER interface of the web page.
  10. 10. The data from the API is retrieved from the following url https://doc.ceo/dog-api/ . Here we use Jquery plugin.
  11. 11. Once the image is retrieved the image is binded on to the web page div using the Knockout library.

JavaScript

Now we will create users for our selections.

  1. var dogBreeds = [
  2. "affenpinscher"
  3. "african"
  4. "appenzeller"
  5. "beagle"
  6. "boxer"
  7. "chow"
  8. "chihuahua"
  9. "dingo"
    10. ];
  10. // We then add array that will add user selection//
  11. var userSelection = [];

Select and Remover USER

Lets now select a user that we want to view in our model and we will be able to remove a selected user. We can add and remove a selected dog breed in inside the "Dog Breed List". To deselect a breed, tap on it again.

  2. selectBreed:function(id)
  3. var breed = dogBreeds[id];
  4. var elementExists = document.getElementById(id);
  5. if(elementExists){
  6. //remove value from array
  7. elementExists.remove();
  8. var x = null;
  9. for (var i = 0; i < userSelection.length; i++) {
  10. if(userSelection[i] == breed){
  11. x = i;
  12. } }
  13. userSelection.splice(x,1);
  14. }else{"
  15. var individualBreed = $('

    '+dogBreeds[id]+'

    ');
  16. $('#selection-list').append(individualBreed);
  17. "userSelection.push(dogBreeds[id]); } }"

Images

We will now be able to view an image of a selected user. In this section we linked a website that allow us to give images of the breeds : DogBreed This is a URL that has the images of the Dog Breeds.

  1. viewImages: function(){
  2. var dog = userSelection[userSelection.length-1];
  3. if(userSelection.length< 1) {
  4. dog = dogBreeds[0];
  5. }
  6. //GET URL
  7. var url = "https://dog.ceo/api/breed/";
  8. url += dog;
  9. url += "/images/random";
  10. url += "/images/random";
  11. url:url,
  12. type:"GET",
  13. beforeSend:function(){
  14. },
  15. success:function(data){
  16. console.log(data);
  17. // var item = JSON.parse(data);
  18. var url_image = data.message;
  19. $('#img_searched_image').attr('src',url_image);
  20. }
  21. })
  22. }
  23. };

Search Button

Here we will be impletmenting a serach function. This Search funtion will print out a select Dog Breed.

  1. $(function(){
  2. myViewModel.populateData();
  3. $('button').on('click', function(){
  4. myViewModel.viewImages();
  5. });
  6. })

Conclusion

I hope that after reading this, everyone learned something they didn't know before. I personally learned a number of things during the course of writing it! We now have a fully functioning Kockout.js view model.

If you have made it this far, I appreciate your time and diligence and I look forward to writing more fun tutorials here in the future.