WPF has a lot of great concepts. One of my favorite is data binding. The syntax though can get pretty tough and you end up having to reference some kind of cheat sheet every time you want to use it. Also you can’t bind directly to methods, instead you have to wrap methods around “commands”.

These limitations really slow you down. Luckily WPF binding is extendable, so I created my own binding which simplified things a lot. Below are some examples an a link to download the source code.

[Read more…]

I actually already posted about this very same thing before. But I’m trying to allow myself to be a little more expressive and descriptive in my posts, so consider this a makeover. Thanks:

Ok so maybe the title to this post is a little harsh. But I only say it because I love JSON and jQuery so much. With a simple $.post() and an ASP.NET MVC service things just work. Things except of course for those @#! dates.

If you haven’t experience this. JSON notation looks a lot like JavaScript, it’s super simple, it make XML look like a math problem at MIT.

XML: <Person><Name>John Doe</Name><Age>45</Age></Person>

JSON: { "Name": "John Doe", "Age": 45 }

That’s great and best of all it just works. If you do a post and the service returns JSON the post will return an object.

var test = { "Name": "John Doe", "Age": 45 };

$.post("MyService", function (person) {
    alert("Hello " + person.Name);
});

Beautiful, just beautiful. The string is a string. The number is a number. And the date is a… string? Yep it’s a string in the format "/Date(23947298342)/". Now there are whole bunch of reasons why that is, but at the end of the day I just wanted a date object.

So what’s a guy to do? Create a library of course! I attached it to this email.

Just include jquery.DateTime.js right after you include jQuery. Should look something like this:

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.DateTime.js" type="text/javascript"></script>

Here’s how it works: Turns out jQuery has a collection of ‘converters’ that it uses depending on the kind of data it’s trying to parse. So I simply replaced the default converter for JSON with my own.

The default converter just called $.parseJSON() and so does mine with one difference, in mine after I parse it into an object I use reflection to enumerate through all the properties of the object generated by $parseJSON() whenever it finds a string matching the date format it converts it into a JavaScript date.

The conversion itself is actually very simple just parse out the number in the string and pass it as the parameter to new Date().

Now that what you get is an actual date you can perform all the regular JavaScript date operations. And you can dynamically format the date however you like using libraries like Steven Levithan’s dateFormat() which you can find here:

http://blog.stevenlevithan.com/archives/date-time-format

P.S. Note the issue wasn’t really JavaScript it’s actually ASP.NET “issue”. There are other ways to solve it including setting up something on the server that generates the “correct” JSON to begin with. I wanted to create a drop in solution which is why I went with this approach.

jquery.DateTime.js

When you get a jQuery object for an iframe the html() and other methods might not function as you would expect them. That is because what you really want is the jQuery object for the ‘document’ of the iframe. How you get the document object depends on the browser.

To simplify things I created a jQuery plugin that allows you to call iframe() instead of jQuery’s $() or find() and returns a jQuery object that should behave the way you expect.

So instead of this which wouldn’t work

$("#MyIframe").html("new HTML");

You would do this:

$.iframe("#MyIframe").html("new HTML");

And instead of this which wouldn’t work:

$("div").find("#MyIframe").html("new HTML");

You would do this:

$("div").iframe("#MyIframe").html("new HTML");

You can download it here: jquery.iframe.js

Just include it after you include jQuery.

I currently use ASP.NET MVC for development on the server side and jQuery and assorted libraries on the client side. One annoying issue that keeps coming up because I keep forgetting about it is dates.

When the server returns JSON it encodes dates as a string, something like /Date(16847928349)/ when I would like to have it as a JavaScript date.

There are several solutions offered when I Googled it. On the client side the solution was mostly to parse it using some other kind of JSON parser like JSON2, or using a regular expression.

But I didn’t want to liter my client code conversion code every time I used a date. I want it to be automatic. So I decided to created a script that did what I wanted. It might be less efficient than parsing dates as needed, but it works seamlessly.

It works by replacing jQuery’s built in converter. Identifying dates using a regular expression and converting them. It does that by first using jQuery.parseJSON() then using JavaScript reflection to enumerate through arrays and properties.

When it finds a string it checks if it matches the ASP.NET MVC date format, if it does it converts it to a date.

To just just include the js file after including jquery.

Download jquery.DateTime.js

Knockout is awesome. I love the view model pattern and I think knockout does a great job of bringing that to JavaScript.

There was one thing thought that I wanted to change. To me it felt like I had to write too much code for simple bindings that sometimes made it hard to tell what was going on. So I decided to create an extension that allows you to use a much more succinct syntax.

Instead of writing something like this:

<span data-bind="text:FirstName"></span><span data-bind="text:LastName"></span>

You can instead write:

{{FirstName}} {{LastName}}

I published the project on GitHub for anyone who’s interested: knockout.curly.js

Update 5/12/2013

Yesterday I wanted to embed HTML through knockout. I grew fond of this curly syntax but the curly syntax uses knockout’s text: binding which encodes string, so it can’t be used to embed HTML. What I needed was the html: binding.

I wanted to use the curly syntax but I didn’t want to start creating a new template language with yet a new syntax to learn. I also wanted the previous syntax to still work. So I finally decided to just allow regular knockout syntax. So now you can embed HTML like this:

{{html:Message}}

More than that you can use any knockout binding syntax if you really wanted to. For example:

{{html:Message, click:ClickHandler}}