Why didnt we just add the label and checkbox to the Rails view template The

Why didnt we just add the label and checkbox to the

This preview shows page 222 - 224 out of 517 pages.

Why didn’t we just add the label and checkbox to the Rails view template? The reason is our design guideline of graceful degradation: by using JavaScript to create the checkbox, legacy browsers will not render the checkbox at all. If the checkbox was part of the view template, users of legacy browsers would still see the checkbox, but nothing would happen when they clicked on it. Why does line 16 refer to MovieListFilter.filter_adult ? Couldn’t it just refer to filter_adult ? No, because that would imply that filter_adult is a variable name visible in the scope of the setup function, but in fact it’s not a variable name at all—it’s just a function-valued property of the object MovieListFilter , which is a (global) variable. It is good JavaScript practice to create one or a few
Image of page 222
global objects to “encapsulate” your functions as properties, rather than writing a bunch of functions and polluting the global namespace with their names. The last step is Step 4, which is to arrange for the setup function to be called. For historical reasons, JavaScript code associated with a page can begin executing before the entire page has been loaded and the DOM fully parsed. This feature was more important for responsiveness when browsers and Internet connections were slower. Nonetheless, we usually want to wait until the page is finished loading and the entire DOM has been parsed, or else we might be trying to bind callbacks on elements that don’t exist yet! Line 19 does this, adding MovieListFilter.filter_adult to the list of functions to be executed once the page is finished loading, as the last row of Figure 6.12 shows. Since you can call $() multiple times to run multiple setup functions, you can keep each file’s setup function together with that file’s functionality, as we’ve done here. To run this example place all the code from Figure 6.12 in app/assets/javascripts/movie_list_filter.js . This was a dense example, but it illustrates the basic jQuery functionality you’ll need for many UI enhancements. The figures and tables in this section generalize the techniques introduced in the example, so it’s worth spending some time perusing them. In particular, Figure 6.12 summarizes the four different ways to use jQuery’s $ , all of which we’ve now seen. var m = new Movie(); (Figure 6.6 , line 13) In the body of the Movie function, this will be bound to a new object that will be returned from the function, so you can use this.title (for example) to set its properties. The new object’s prototype will be the same as the function’s prototype. pianist.full_title(); (Figure 6.6 , line 15) When full_title executes, this will be bound to the object that “owns” the function, in this case pianist . $(’#filter’).change( MovieListFilter.filter_adult); (Figure 6.10 , line 16) When filter_adult is called to handle a change event, this will refer to the element on which the handler was bound, in this case one of the element(s) matching the CSS selector #filter .
Image of page 223
Image of page 224

You've reached the end of your free preview.

Want to read all 517 pages?

  • Spring '19
  • Dr.Marcos

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors