JavaScript

Backbone and ASP.NET MVC: Use Nullable types as Id

By

As a side note to my blog post about renaming the idAttribute in Backbone when using it with ASP.NET (MVC), this post continues with the Id attribute. The Id attribute in Backbone is very important. Backbone uses it to determine if an object is new, or already existed. Collections use it to determine if it already contains any given object. So I ran into a problem in a situation where my model required a lot of “supporting data” before it was saved. To add this data, I decided to create the models on the server and add it to a collection (since there were a whole list of them). No matter how many models I added to the list, only the first one was rendered. Why? Because my model on the server was using a non-nullable Integer as its Id property … Continued

Backbone and ASP.NET MVC: Rename the ID attribute

By

In Backbone, a model’s ID attribute is vital in the way Backbone handles models and collections. In a collection, you can call get with an ID and you’ll get back the model. The thing is, naming conventions across languages does not always agree. In .Net properties are named in PascalCase. In JavaScript camelCase is the standard, so naturally this leads to a conflict when your model in Backbone names the ID attribute id, and the corresponding domain model on the server side is named Id. I was using an ASP.NET MVC controller to return a collection of Accounts, but when it hit the client, got changed and later saved, the ID was lost and the model was created as a new instance in the database. The problem was that when Backbone fetched the collection, and automatically turned the objects in … Continued

Backbone.js Compatible Routes for, non-Web API, ASP.NET MVC projects

By

Backbone.js has become my JavaScript MV* framework of choice (you do use a JavaScript MV* framework, to structure JavaScript, right?). I find myself using ASP.NET MVC for less and less that has something to do with views, and other stuff that belongs on the client. The server, being ASP.NET MVC, is the new backend now a days. I’m sure that’s how Microsoft sees it as well, with the release of Web API. When using models in Backbone, and specifying the urlRoot setting, Backbone will automatically construct URLs to do CRUD operations against your server. It uses RESTful URLs, and regular ASP.NET MVC controllers are not compatible with those out of the box. Consider this Backbone model and collection: var Account = Backbone.Model.extend({ urlRoot: “/accounts” }); var AccountCollection = Backbone.Collection.extend({ model: Account, url: “/accounts” }); When you save a new Account, Backbone will make a POST … Continued

10 Ways to (re) Structure JavaScript

By

Structuring JavaScript can be a job in itself if you don’t look out. I was attending the virtual jQuery Summit 2011, and one of the talks were called ‘Structuring Your DOM-based Application‘ by Garann Means. Her talk really took me back to the days of fighting un-structured JavaScript. I was working on a code base that had been maintained by a handful of different developers, each with different skills, ideas and disciplin. Web development, and especially JavaScript requires a lot of disciplin in order to keep the code clean and structured, and that just wasn’t the case at that time. While I was watching Garann’s talk, I constantly thought of all the problems we had and what we eventually did to solve our issues and take control of our JavaScript. This is is my 10 ideas on ways to (re) structure JavaScript, … Continued

JavaScript Bundling Issues When Using Unfinished Closures

By

We all know it’s a good idea to bundle JavaScript files into as few script includes as possible to minimize HTTP request. And – we all know you should write your code inside closures, to avoid the biggest problem of JavaScript: its dependence on global variables! But what happens when those two things don’t work together? For me, they didn’t play nice with each other today. Whenever I bundled my JavaScript files i got an Uncaught TypeError: undefined is not a function. Consider this code: /****** a-file.js ******/ !function($) { // Code here }(window.jQuery) /****** another-file.js ******/ (function ($) { $(“#hello”).text(“World!”); })(window.jQuery);​ The error occurred on the first line, inside the closure in another-file.js. Take a look at this jsFiddle. Since the result of the first closure is true, the above code will evaluate as this: /****** a-file.js ******/ true /****** another-file.js ******/ (function … Continued

Making your ASP.NET Global Resource files work in JavaScript. IntelliSense included!

By

Any modern web application needs localization! You simply can’t ignore the huge amounts of people who doesn’t speak your language, or whose native language is different from yours. You’re probably using resource files (.resx) in .NET, but how do you go about getting values from your resource files in JavaScript? Rick Strahl wrote a great blog post about an HttpHandler that serves the content of your resource files in JavaScript. You basically add a script tag to your page that points to the HttpHandler, and the HttpHandler will produce the resources in JavaScript as an object with properties on it, like this: [code lang="js"]var localRes = { AreYouSureYouWantToRemoveValue: "Sind Sie sicher dass Sie diesen Wert l\u00F6schen wollen?", BackupComplete: "Der Backup f\u00FChrte erfolgreich durch", BackupFailed: "Der Backup konnte nicht durchgef\u00FChrt werden", BackupNotification: "Diese Operation macht einen Backup von der Lokalisationtabelle. \nM\u00F6chten … Continued