DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Generics in Java and Their Implementation
  • Demystifying SPF Record Limitations
  • How AI Will Change Agile Project Management
  • How To Use an Automatic Sequence Diagram Generator

Trending

  • Generics in Java and Their Implementation
  • Demystifying SPF Record Limitations
  • How AI Will Change Agile Project Management
  • How To Use an Automatic Sequence Diagram Generator
  1. DZone
  2. Coding
  3. Frameworks
  4. Validating all observables w/ Knockout validation and Typescript

Validating all observables w/ Knockout validation and Typescript

Derik Whittaker user avatar by
Derik Whittaker
·
Apr. 23, 13 · Interview
Like (0)
Save
Tweet
Share
5.80K Views

Join the DZone community and get the full member experience.

Join For Free

Knockout js is an awesome MVVM framework for HTML/Javascript development and there is an extension library which performs data validation called Knockout.Validation which is an equally awesome library.  Today when doing some coding I needed to validate that all properties on a VM were valid. A quick search showed me this was very easy and should just work.  However, I am using Typescript and for all of its awesomeness it sometimes makes life a bit more challenging than expected.

To validate an entire observable all you should need to do is first tell the validation library that your vm is under validation by doing

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_76EF51D5.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1366665968&Signature=JoxLUklsF9dlx5BeBglYpBF3cS0%3d

and then you can simply call a .isValid() on your VM as such.

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_1C7B5FE8.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1366666385&Signature=k0%2f2TrjEzstL0xww7AK763A8zrQ%3d

However, when doing this in Typescript I was getting the red squiggly as you see here.

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_3E66C26C.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1366666399&Signature=2LkwlmX96gbBukROAHhWUkHUSpU%3d

At first I was not sure why, so I decided to take a peek at the source for the validation and I came across the code you see below.

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_3579C0DE.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1366666409&Signature=VdC%2bGGx3FM2icrCH93KjH5OfEhw%3d

As you can see, the highlighted yellow is where the .isValid() method is being added to object (obj == your passed in viiew model) so I KNOW that my view model has a .isValid.  Sure enough at runtime if I hit a breakpoint and did this.isValid() i would get the response I was expecting.  However, because .isValid() was being added to my VM dynamically (this is the amazing power of JavaScript) Typescript did not know about the method and it was causing compile time errors.

How to fix this?

The simple solution that I found was to ‘fake’ Typescript into thinking that the .isValid computed is on my VM from the start.  I did this by adding the following to my VM

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_33CE166C.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1366666425&Signature=jAgzaWVy31V1Zw%2bSpRy1dMtFkHE%3d

Now you will notice that I am simply declaring the computed I am NO assigning it and that is ok.  In fact if you look at the generated output from the Typescript compiler you will NOT see a computed created for .isValid().  But this does not matter.  The Typescript compiler thinks it is there so you are free to use it off of your VM as you see here.

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_1C7B5FE8.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1366666385&Signature=k0%2f2TrjEzstL0xww7AK763A8zrQ%3d

After adding my declaration for isValid() I was good to go and my code worked as expected both at code time and run time.

Till next time,




TypeScript Knockout (web framework)

Published at DZone with permission of Derik Whittaker, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Generics in Java and Their Implementation
  • Demystifying SPF Record Limitations
  • How AI Will Change Agile Project Management
  • How To Use an Automatic Sequence Diagram Generator

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: