Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering JavaScript Object-Oriented Programming

You're reading from   Mastering JavaScript Object-Oriented Programming Advanced patterns, faster techniques, higher quality code

Arrow left icon
Product type Paperback
Published in Jun 2016
Publisher Packt
ISBN-13 9781785889103
Length 292 pages
Edition 1st Edition
Languages
Arrow right icon
Toc

Table of Contents (13) Chapters Close

Preface 1. A Refresher of Objects FREE CHAPTER 2. Diving into OOP Principles 3. Working with Encapsulation and Information Hiding 4. Inheriting and Creating Mixins 5. Defining Contracts with Duck Typing 6. Advanced Object Creation 7. Presenting Data to the User 8. Data Binding 9. Asynchronous Programming and Promises 10. Organizing Code 11. SOLID Principles 12. Modern Application Architectures

Implementing data binding


After clarifying what we mean by data binding, let's see what are the most common techniques used for its implementation. We will explore these techniques gradually going from the most simple to the most sophisticated that use advanced features of JavaScript.

Manual data binding

The simplest way to set up a data binding relationship between two objects is manual binding. Let's consider the following markup:

<label>Name <input type="text" id="txtName"></label><br/> 
<label>Surname <input type="text" id="txtSurname"></label><br/> 
<button id="btnSave">Save</button> 

It defines an HTML view with two text boxes and a save button. In our data binding model, the DOM elements that correspond to the two textboxes are the data target objects. Now, let's consider the following code:

function Person(name, surname) { 
  this.name = name; 
  this.surname = surname; 
} 
 
person = new Person("John", "Smith"); 

The person...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime