Derik Whittaker

Syndication

News


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

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

image

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…

image

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.

 

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

image

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

image

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

Till next time,


Posted 04-30-2013 8:08 AM by Derik Whittaker

[Advertisement]

Comments

Mark Rendle wrote re: Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering
on 04-30-2013 10:41 AM

I prefer to let the TypeScript compiler take care of concatenating everything into a single JS file, which ensures everything is in the right order.

Rob Eisenberg wrote re: Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering
on 05-01-2013 12:01 PM

Compile TypeScript to AMD modules and then use require.js. Done.

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)