Data binding with custom attributes
by J.M. Gustafson
HTML5 Web Application Development By Example Beginner's guide
- HTML5 Web Application Development By Example Beginner's guide
- Table of Contents
- HTML5 Web Application Development By Example Beginner's guide
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Preface
- 1. The Task at Hand
- The components of an HTML5 application
- Time for action – creating the HTML file
- Time for action – creating the CSS file
- Time for action – creating the JavaScript file
- Creating our first application
- Time for action – creating a tasklist
- Time for action – removing a task from the list
- Time for action – moving tasks within the list
- HTML templates
- Time for action – implementing a template
- Time for action – editing a task in the list
- Saving the state of the application
- Time for action – creating a localStorage wrapper
- Time for action – storing the tasklist
- Time for action – loading the tasklist
- Summary
- 2. Let's Get Stylish
- CSS3 overview
- Rounded corners
- Shadows
- Time for action – styles in action
- Backgrounds
- Time for action – adding a gradient and button images
- Transitions
- Transforms
- Time for action – effects in action
- Dynamic stylesheets
- Time for action – adding a theme selector
- Filling the window
- Time for action – expanding the application
- Summary
- 3. The Devil is in the Details
- HTML5 input types
- Task details
- Time for action – adding task details
- Time for action – hiding task details
- Custom data attributes
- Data binding with custom attributes
- Time for action – building a data model
- Time for action – implementing the bindings
- Time for action – loading the task list
- Queuing up changes
- Time for action – delaying the saves
- Summary
- 4. A Blank Canvas
- HTML5 canvas
- Getting a context
- Canvas basics
- Canvas pad
- Time for action – creating a canvas pad
- Time for action – showing the coordinates
- Drawing lines
- Time for action – using the mouse to draw
- Changing context properties
- Time for action – adding context properties
- Creating a toolbar
- Time for action – creating a toolbar
- Time for action – implementing a reusable toolbar
- Adding a toolbar
- Time for action – adding the toolbar object
- Time for action – initializing menu items
- Adding drawing actions
- Time for action – creating drawing actions
- Time for action – saving and restoring
- Adding drawing tools
- Time for action – adding a line tool
- Time for action – adding a rectangle tool
- Time for action – adding a circle tool
- Summary
- 5. Not So Blank Canvas
- Drawing text
- Time for action – adding a text tool
- Transformations
- Time for action – adding an Ellipse tool
- Time for action – exporting an image
- Handling touch events
- Time for action – adding touch event handlers
- Photo Pad
- Time for action – creating Photo Pad
- The File API
- Time for action – loading an image file
- Adding effects
- Time for action – the imageEffects object
- Time for action – black and white
- Time for action – sepia
- Image distortion
- Time for action – making waves
- Summary
- 6. Piano Man
- HTML5 audio overview
- Loading audio files
- Time for action – creating an AudioManager object
- HTML5 piano application
- Time for action – creating a virtual piano
- Time for action – loading the notes
- Time for action – playing the notes
- Keyboard events
- Time for action – adding keyboard events
- Volume and sustain controls
- Time for action – adding a sustain control
- Time for action – adding a volume control
- Audio tools
- Summary
- 7. Piano Hero
- Creating Piano Hero
- Time for action – creating the splash panel
- Time for action – creating the game panel
- Time for action – creating the controller
- Creating an audio sequencer
- Time for action – creating AudioSequencer
- Playing a song
- Time for action – adding the audio sequencer
- Creating animated notes
- Time for action – adding notes
- Time for action – animating the notes
- Handling user input
- Time for action – checking the notes
- Ending the game
- Time for action – creating the results panel
- Summary
- 8. A Change in the Weather
- 9. Web Workers Unite
- 10. Releasing an App into the Wild
- A. Pop Quiz Answers
- Chapter 1, The Task at Hand
- Chapter 2, Let's Get Stylish
- Chapter 3, The Devil is in the details
- Chapter 4, A Blank Canvas
- Chapter 5, Not So Blank Canvas
- Chapter 6, Piano Man
- Chapter 7, Piano Hero
- Chapter 8, A Change in the Weather
- Chapter 9, Web Workers Unite
- Chapter 10, Releasing an App into the Wild
- Index
A great use for custom data attributes is to implement data binding. Data binding allows us to map user controls in the DOM to fields in the data model so that they are automatically updated when the user changes them. Using this technique we can eliminate a lot of boring repetitive code that does nothing more than handle events and map fields in the view to fields in the model.
Note
There are a few excellent data binding libraries available for JavaScript, including Backbone.js and Knockout. We will implement our own simple data binding here to learn how to use custom attributes. If you find yourself building an application with a lot of data you might consider using one of these libraries.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.