HTML5 Zone is brought to you in partnership with:

Derik Whittaker is a Software Architect who specializes in all things .Net. Derik has been building enterprise systems on top of the .Net technology stack for over 12 years and along the way has picked up a thing or two about how to create killer systems. During his 12 year career Derik has worked in many different industries ranging from Marking, Healthcare, Retail, Insurance, Automotive and Online Entertainment. Currently Derik is working for a Technology startup (VStrator) in Raleigh North Carolina helping them build out a best of breed technology solution which will enable their users to create world class coaching solutions. Derik believes that the job of a developer is more than just turning syntax into working 1’s and 0’s. Derik is a DZone MVB and is not an employee of DZone and has posted 8 posts at DZone. You can read more from them at their website. View Full User Profile

Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering

05.01.2013
| 1500 views |
  • submit to reddit

Today I extended one of our classes to use inheritance via Typescript (love that).  When I refreshed the page I received an error here

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_4DA86122.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367361468&Signature=YEkmeVSKrxZF%2fBEcYS0ZwQjGWQY%3d

When I dropped to the Chrome debugger and outputted both the values for both ‘d’ and ‘b’ I was a bit shocked.  ‘d’ was valid, but ‘b’ was undefined.  I tried a whole slew of things but nothing came to mind.  Of course I thought maybe I was using inheritance wrong, but my syntax was right.

After some digging online I found this link which talks about how a parent class has to be loaded prior to it child for everything to work.  This makes perfect sense given the way JavaScript parses code.  I had this brilliant idea that I would simply add a _ prefix to my base class name and that would have the file loaded first.  WRONG…

If you look at the image below you can see that _BaseViewModel.js is way at the bottom of the list and my error was being thrown in the AthleteListingViewModel…

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

Somehow I needed to force the bundler to load the files in the order I wanted.  In our case I am NOT including each file into the bundle manually, rather I am using the ‘IncludeDirectory’ feature. 

After a bit more searching I found this link which solved the same basic problem but in a much more complex way than I needed.  However it showed me how I could solve the problem in a few lines of code.  What I needed to do was create a new instance of IBundleOrderer and use it.

This code is my AlphaSortedBundleOrderer which solved my issues.

    public class AlphaSortedBundleOrderer : IBundleOrderer  
    {  
        public IEnumerable OrderFiles(BundleContext context, IEnumerable files)  
        {  
            var sortedFiles = files.OrderBy(x => x.Name).ToList();  
      
            return sortedFiles;  
        }  
    }  

After I created my new AlphaSortedBundleOrdered I just needed to use it in my bundler.  I did this as you see below.

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

Once I had my bundler setup correctly I re-ran the page and my .js files were ordered as expected.

http://s3.amazonaws.com/Devlicious/CommunityServer.Blogs.Components.WeblogFiles/derik_whittaker/image_725E99FB.png?AWSAccessKeyId=0KMA35HT86EVXB99Z302&Expires=1367361509&Signature=SfIx7dLT90ZBrT9jOO%2fyMNxpADk%3d

Now I am sure there is a 100 ways to solve this problem, but this worked for me.

Till next time,




Published at DZone with permission of Derik Whittaker, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)