Simpler Binding Syntax for Knockout

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}}

Leave a Reply

Your email address will not be published. Required fields are marked *