Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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,




Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}