Backbone.js Tutorial Part 4 - Backbone.js Models: Model Inheritance

Programming with Mosh · Beginner ·🛠️ AI Tools & Apps ·11y ago

Key Takeaways

Backbone.js model inheritance using the extend method, creating custom model types and overriding methods in base classes

Full Transcript

just like we can extend backmon do model to create our custom model types we can use the extend method to further create submodel types here I've got a model called animal with a method called walk that logs a message to the console let's go ahead and create a new model type that inerts from the animal with this our dog model now inherits all the capabilities of the animal so we can call the walk method on the dog which should log a message to the console let's verify this in Chrome there you go we didn't Define the walk method on the dog but the code was inherited from the base model type we can also overwrite methods in a Base Class let's see how it works with this code if we call the walk method on the dog the implementation inside the dog class will be executed let's try it out in Chrome this verifies that the walk method in the dog class overrode the oneof space class you might ask what if you want to call the walk method in the base class in C or Java we do this with the keyword base or super unfortunately JavaScript doesn't provide an easy way to do this but this is still possible let me show you how it works basically you need to access the Prototype of the base class and then call the target method using the apply method okay now if we test this out in Chrome we shall see two messages one from the walk method in the animal and the other from the dog so we can use the extend method to further extend the inheritance hierarchy all the capabilities of a base class will be inherited by the child classes so far you have learned how to create an instantiate models and how to get and set their attributes most backbone applications that use models are often need to get the models from a persistent store on the server in the next lecture we'll cover how to synchronize our models with a persistent store on the server thank you for watching

Original Description

Backbone.js Tutorial Part 4 - Backbone.js Models: Model Inheritance This video is part of my 4-hour Udemy course where I take you on a step-by-step journey to learn Backbone.js from scratch to a level to start building real-world applications with it. Throughout the course, I’ll show you many real-world examples of popular websites such as Facebook, Twitter, Bitly, FourSquare, Pinterest, etc and explain how you would implement something like them with Backbone. I'll also give you cheat sheets and assignments to put what you learn in practice. You'll also get the benefit of asking me any questions and I'll help you out throughout your learning. If you’re interested, you can get the course with a discount coupon here: https://www.udemy.com/backbonejs-tutorial/?couponCode=utube More free Backbone.js tutorials on my channel: Backbone.js Models Creating Models http://youtu.be/4t0n5k0X7ow Working with Model Attributes http://youtu.be/FXlSC1gcs7E Model Validation http://youtu.be/niYCJOMZPJw Inheritance http://youtu.be/FfQT31gZWp8 Syncing Models with the Server http://youtu.be/AvhdNKmmAXU Backbone.js Collections Creating Collections http://youtu.be/ZnGP9ScI9pc Working with Collections http://youtu.be/NjCF_7bpKjw Fetching Collections from the Server http://youtu.be/jbiqBchPfKw Backbone.js Views Creating Views http://youtu.be/QASCp8PyRXM Passing Data to Views http://youtu.be/QkHeKnjNuWA Handling the DOM Events http://youtu.be/dC0LVPZedZA Handling the Model Events http://youtu.be/tTRy_GluLac Handling the Collection Events http://youtu.be/kh6ehZ1BCUk Templating in Views http://youtu.be/BFAGGPgi0ec Take my full 4-hour Udemy course to also learn about: Backbone.js Routers Backbone.js Events Testing Backbone.js Applications with Jasmine Modularizing Bakcbone.js Applications with Require.js Building an Application from Scratch with Backbone.js Get the full course with 30% discount here: https://www.udemy.com/backbonejs-tutorial/?couponCode=byt70 Facebook https://w
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Programming with Mosh · Programming with Mosh · 5 of 60

← Previous Next →
1 6 Visual Studio Tips to Increase Your Productivity | Mosh
6 Visual Studio Tips to Increase Your Productivity | Mosh
Programming with Mosh
 2 Visual Studio Keyboard Shortcuts that Speed Up Debugging Applications | Mosh
Visual Studio Keyboard Shortcuts that Speed Up Debugging Applications | Mosh
Programming with Mosh
 3 Backbone.js Tutorial Part 2 - Backbone.js Models: Working with Model Attributes
Backbone.js Tutorial Part 2 - Backbone.js Models: Working with Model Attributes
Programming with Mosh
 4 Backbone.js Tutorial Part 3 - Backbone.js Models: Model Validation
Backbone.js Tutorial Part 3 - Backbone.js Models: Model Validation
Programming with Mosh
 ▶ Backbone.js Tutorial Part 4 - Backbone.js Models: Model Inheritance
Backbone.js Tutorial Part 4 - Backbone.js Models: Model Inheritance
Programming with Mosh
 6 Backbone.js Tutorial Part 1 - Backbone.js Models: Creating Models
Backbone.js Tutorial Part 1 - Backbone.js Models: Creating Models
Programming with Mosh
 7 Backbone.js Tutorial Part 5 - Backbone.js Models: Syncing Models with the Server
Backbone.js Tutorial Part 5 - Backbone.js Models: Syncing Models with the Server
Programming with Mosh
 8 Backbone.js Tutorial Part 6 - Backbone.js Collections: Creating Collections
Backbone.js Tutorial Part 6 - Backbone.js Collections: Creating Collections
Programming with Mosh
 9 Backbone.js Tutorial Part 7 - Backbone.js Collections: Working with Collections
Backbone.js Tutorial Part 7 - Backbone.js Collections: Working with Collections
Programming with Mosh
 10 Backbone.js Tutorial Part 8 - Backbone.js Collections: Fetching Collections from the Server
Backbone.js Tutorial Part 8 - Backbone.js Collections: Fetching Collections from the Server
Programming with Mosh
 11 Backbone.js Tutorial Part 9 - Backbone.js Views: Creating Views
Backbone.js Tutorial Part 9 - Backbone.js Views: Creating Views
Programming with Mosh
 12 Backbone.js Tutorial Part 10 - Backbone.js Views: Passing Data to Views
Backbone.js Tutorial Part 10 - Backbone.js Views: Passing Data to Views
Programming with Mosh
 13 Backbone.js Tutorial Part 11 - Backbone.js Views: Handling the DOM Events
Backbone.js Tutorial Part 11 - Backbone.js Views: Handling the DOM Events
Programming with Mosh
 14 Backbone.js Tutorial Part 12 - Backbone.js Views: Handling the Model Events
Backbone.js Tutorial Part 12 - Backbone.js Views: Handling the Model Events
Programming with Mosh
 15 Backbone.js Tutorial Part 13 - Backbone.js Views: Handling Collection Events
Backbone.js Tutorial Part 13 - Backbone.js Views: Handling Collection Events
Programming with Mosh
 16 Backbone.js Tutorial Part 14 - Backbone.js Views: Templating
Backbone.js Tutorial Part 14 - Backbone.js Views: Templating
Programming with Mosh
 17 Clean Code: Learn to write clean, maintainable and robust code
Clean Code: Learn to write clean, maintainable and robust code
Programming with Mosh
 18 C# Events and Delegates Made Simple | Mosh
C# Events and Delegates Made Simple | Mosh
Programming with Mosh
 19 C# Generics Tutorial: Whats and Whys | Mosh
C# Generics Tutorial: Whats and Whys | Mosh
Programming with Mosh
 20 Debugging C# Code in Visual Studio | Mosh
Debugging C# Code in Visual Studio | Mosh
Programming with Mosh
 21 Repository Pattern with C# and Entity Framework, Done Right | Mosh
Repository Pattern with C# and Entity Framework, Done Right | Mosh
Programming with Mosh
 22 Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch | Mosh
Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch | Mosh
Programming with Mosh
 23 Architecture of Angular 2+ Apps
Architecture of Angular 2+ Apps
Programming with Mosh
 24 Working with Components in Angular
Working with Components in Angular
Programming with Mosh
 25 C# Tutorial For Beginners - Learn C# Basics in 1 Hour
C# Tutorial For Beginners - Learn C# Basics in 1 Hour
Programming with Mosh
 26 Difference between Junior and Senior Developers
Difference between Junior and Senior Developers
Programming with Mosh
 27 Step-by-step ASP.NET MVC Tutorial for Beginners | Mosh
Step-by-step ASP.NET MVC Tutorial for Beginners | Mosh
Programming with Mosh
 28 [Pluralsight]: Become a Full-stack .NET Developer
[Pluralsight]: Become a Full-stack .NET Developer
Programming with Mosh
 29 Xamarin Forms Tutorial: Build Native Mobile Apps with C#
Xamarin Forms Tutorial: Build Native Mobile Apps with C#
Programming with Mosh
 30 Value Types and Reference Types in JavaScript
Value Types and Reference Types in JavaScript
Programming with Mosh
 31 Using Redux in Angular 2+ Apps | Mosh
Using Redux in Angular 2+ Apps | Mosh
Programming with Mosh
 32 Testing Angular 2+ Apps with Jasmine and Karma | Mosh
Testing Angular 2+ Apps with Jasmine and Karma | Mosh
Programming with Mosh
 33 Profile and optimize your Angular 2 apps
Profile and optimize your Angular 2 apps
Programming with Mosh
 34 Build a Real-world App with ASP.NET Core and Angular 2
Build a Real-world App with ASP.NET Core and Angular 2
Programming with Mosh
 35 Entity Framework 6 Tutorial: Learn Entity Framework 6 from Scratch
Entity Framework 6 Tutorial: Learn Entity Framework 6 from Scratch
Programming with Mosh
 36 Two-way Binding and ngModel in Angular 4
Two-way Binding and ngModel in Angular 4
Programming with Mosh
 37 Udemy Live 2017: Teaching Tech Panel
Udemy Live 2017: Teaching Tech Panel
Programming with Mosh
 38 Demo of An E-commerce App Built with Angular, Firebase and Bootstrap 4
Demo of An E-commerce App Built with Angular, Firebase and Bootstrap 4
Programming with Mosh
 39 My Brand New Angular Course
My Brand New Angular Course
Programming with Mosh
 40 TypeScript Tutorial - TypeScript for React - Learn TypeScript
TypeScript Tutorial - TypeScript for React - Learn TypeScript
Programming with Mosh
 41 Access Modifiers in TypeScript
Access Modifiers in TypeScript
Programming with Mosh
 42 TypeScript Interfaces
TypeScript Interfaces
Programming with Mosh
 43 TypeScript Classes
TypeScript Classes
Programming with Mosh
 44 TypeScript Constructors
TypeScript Constructors
Programming with Mosh
 45 TypeScript Properties
TypeScript Properties
Programming with Mosh
 46 Angular Tutorial for Beginners: Learn Angular & TypeScript
Angular Tutorial for Beginners: Learn Angular & TypeScript
Programming with Mosh
 47 AngularJS vs Angular 2 vs Angular 4 | Mosh
AngularJS vs Angular 2 vs Angular 4 | Mosh
Programming with Mosh
 48 Angular Material Tutorial | Mosh
Angular Material Tutorial | Mosh
Programming with Mosh
 49 Angular Animations Tutorial | Mosh
Angular Animations Tutorial | Mosh
Programming with Mosh
 50 Firebase in Angular Applications | Mosh
Firebase in Angular Applications | Mosh
Programming with Mosh
 51 Deploying Angular Applications | Mosh
Deploying Angular Applications | Mosh
Programming with Mosh
 52 Building Forms in Angular Apps | Mosh
Building Forms in Angular Apps | Mosh
Programming with Mosh
 53 Directives in Angular Applications
Directives in Angular Applications
Programming with Mosh
 54 Routing and Navigation in Angular | Mosh
Routing and Navigation in Angular | Mosh
Programming with Mosh
 55 Angular 4 in 40 Minutes
Angular 4 in 40 Minutes
Programming with Mosh
 56 [NEW COURSE] Unit Testing for C# Developers
[NEW COURSE] Unit Testing for C# Developers
Programming with Mosh
 57 Unit Testing C# Code - Tutorial for Beginners
Unit Testing C# Code - Tutorial for Beginners
Programming with Mosh
 58 C# Classes Tutorial | Mosh
C# Classes Tutorial | Mosh
Programming with Mosh
 59 C# Object Initializers Tutorial
C# Object Initializers Tutorial
Programming with Mosh
 60 C# Constructors Tutorial | Mosh
C# Constructors Tutorial | Mosh
Programming with Mosh

This video teaches how to use the extend method in Backbone.js to create custom model types, override methods in base classes, and understand JavaScript inheritance. It covers creating a model hierarchy and using the Prototype and apply method to call base class methods.

Key Takeaways
  1. Create a base model type using Backbone.js
  2. Use the extend method to create a custom model type that inherits from the base model
  3. Override methods in the base class using the custom model type
  4. Use the Prototype and apply method to call base class methods from the custom model type
  5. Test and verify the model inheritance hierarchy in Chrome
💡 The extend method in Backbone.js allows for creating custom model types that inherit capabilities from base classes, and JavaScript's Prototype and apply method can be used to call base class methods from custom model types.

Related AI Lessons

Up next
How to Open HPL Files (HP-GL Plotter)
File Extension Geeks
Watch →