FW App Tutorial - Controllers and Templates

In this unit we will discuss Controllers and Templates, and add functionality to your models you created in the last unit.

Introduce It!

Ember Controllers and Templates are very interrelated. The Templates hold the Handlebars HTML to make a page function, and the Controllers hold the Javascript for any actions or variables on the page. Because they are so interrelated, we are combining them into one unit. One note before we get started:

Please refresh yourself on the brief overview on templates and controllers given above at this time. They can be found at Conceptual Introduction - Client - Templates and Conceptual Introduction - Client - Controllers.

Learn It!

So now that you have a broad sketch for what an Ember controller is, read over the Ember Guides on controllers for a deeper understanding of how they function.

One note before we move forward about controllers. The online Ember community does not like controllers. They talk about them like they are outdated and not necessary for an Ember App as their functionality could be entirely replaced by Components. So much so that you may have noticed that the Ember Guides make a note about how they can still be useful. Here, at Informatics, controllers are an integral part to our application. Regardless of the opinions of those outside Informatics, we will continue to make heavy use of controllers throughout each of our applications, so understanding their function becomes vitally important.

For Templates, please read over the Ember Guides on templates to learn more.

Feel free to check back at all the above documentation as you move through the assignments to help bring home what you learned about each of the items.

Quick Tips for Debugging in Javascript/Handlebars: There are a few different commands that make debugging problems VERY helpful, so as you are dealing with issues, using one of the three of these commands will be helpful to know. For a synopsis of all the potential tools for debugging in Javascript, click here. Here are the highlights:

  • Debugger: This is perhaps the single best debugging tool in the client side. If your Dev Tools are open, when the code runs across a debugger; statement, it will pause mid-execution in that point in the code. The console is now in that environment, so you can check various variables in your console, then you can press "play" to resume execution.
  • Console.log: returns whatever is inside to the console Dev Tool.
  • Rarely you will come across the need to debug in Handlebars and wish there was a way you could put a debugger in handlebars instead of the javascript to be in a slightly different environment. This can be accomplished using the debugger or log hbs helpers, documentation here

Bring It Home!

We are starting to get deeper into FW development! That means that there may be times that it can be helpful to look at repositories for other apps to see how to do something. For example, if one of the issues is to create a panel, it might behoove you to look at other FW apps and how they created a panel.

Also quick note, these issues that we have for this unit are mixed between Controller and Template. Some of the things we had in previous units might also come back. This is when you use your critical thinking skills to think “Is the issue I am faced with something that will have to do with a model, a controller or a template?”

  1. Issue #1: I can’t get to the books page. There should really be a link in the menu bar at the top of the page to link to the books page.

  2. Issue #2: Why is the main page called "Main" in the link in the menu bar? All other apps have the purpose for the page as the title that it uses, and the url at the top says “checkout-books.” As such, please change the menu bar to have "Checkouts" instead of "Main."

  3. Issue #3: The book page is fairly plain. Please add a panel with the following information:

    • Header should have a title "Books"
    • The body of the panel itself should have a message about the purpose of the page (which is to edit, add, or delete books).
    • And the footer should have a button which calls an action to open the modify-book modal.
      • Hint: we haven’t learned about modals yet as that is the next unit, so all you have to do in the action is toggle the boolean used in the if statement at the bottom of the page, and we should set currentBook to a new model (to remember how to create a new model, check out creating from the documentation last unit).
      • If you get stuck on this one, look around at other apps to help you out. Contact developer admin if you need a specific example.
      • Note: The information in the modify-book modal is not complete, so you will not be able to add a book successfully with the modal, and this will be fixed in the next unit.

  4. Issue #4: Really, the code is a little messy, you shouldn’t be using variables in the handlebars that are not given a default in the controller

    • Hint: see if there are any variables called in handlebars that aren’t defined in the controller. If so, add them to the controller because this is bad coding practice...

  5. Issue #5: Please add a temporary panel (until we learn more) called All Books, which lists all the books that have been added to your department to the Checkouts page in order by their title. Each book should have its own line. It should fill up three quarters of the page with the current panel taking up the first quarter.

    • Hint: checkout the sortBy import from ember-fw (other apps will have it as well)
    • Hint 2: look at class names from other apps that have their page divided in the way I described (for example, Status the clock in takes up 1 quarter and the people clocked in takes up 3 quarters of the page). CSS is always in the class names… which we take a lot from Bootstrap.js.

  6. Challenge (remember, only complete this if you have enough time to also do the “check” step): Add a variable that has only the books which are available to be checked out (i.e. they are not currently checked out), so it should automatically change whenever a book is checked out or returned.

    • For testing, you can just add a checkout entry into the database, and change out the sorted list of books that you already displayed with the list that is just available.
    • As always, direct any questions at the developer admin.

Check It!

Now that you have learned about and practiced with Controllers and Templates, please let one of the developer admin know. They will fork the training-developer-controller-fork, so you can see the answers for this unit. Please compare your code and anywhere your code differs more substantially than a variable name, note the differences and understand why that code was written in that way by the lead developer. While yours may not necessarily be “wrong” there may be a better or more “Informatics” way of doing it. Feel free to ask whatever questions you desire about this to any of the Informatics Admin.

After you have sufficiently checked your code, make sure you have pushed all your changes to bitbucket (on the old repository), and then please delete your trad folder, and complete the Install App For Development for the new repository with the answer code. After you have sufficiently downloaded and installed this app, you are ready to continue to the next Unit when you get the go ahead from the developer admin.