Client Side Javascript Developer

javascript-developer-needed.md

Looking for a client side javascript developer who can use knockout.js to help build the front end of our application. To show off your skills, we would like the html/css and javascript components of Twitter's Bootstrap library turned into templates that would be useful with knockout.js. Things will get much more interesting after that.

Example alert:

<div data-bind="attr: { class: type }">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <!-- ko data-bind="text: message" -->
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
  <!-- /ko -->
</div>

var viewModel = {
  type: ko.observable("alert"),
  message: ko.observable("<strong>Warning!</strong> Best check yo self, you're not looking too good.")
};

ko.applyBindings(viewModel);

This can turn into a long-term relationship building out the front end of our application. The required skills listed below are focused on client-side development, but it would be helpful if you have the desired skills related to the server side as well.

Required Skills:

• JavaScript
• Knockout.js
• Underscore.js
• Git/Github

Desired Skills:

• ASP.NET MVC
• C#
• Visual Studio 2012
• Windows Azure
• Active participation in open source projects

I am very much interested in working with you.

I think it'd be a lot cleaner to write a binding handler instead. The markup would then be really neat:

<div data-bind="alert: { message: message }"></div>

Here's the binding handler I put together to do this. This is just a quick hack, so please don't mind any inefficiencies; I haven't linted it.

ko.bindingHandlers["alert"] = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $elem = $(element)
            config = ko.utils.unwrapObservable(valueAccessor()),
            message = null,
            $messageContainer = $("<span></span");

        $elem.addClass("alert");
        $("<button type='button' class='close' data-dismiss='alert'>x</button>")
            .appendTo($elem);

        $messageContainer.appendTo($elem);

        if (config.message) {
            message = ko.utils.unwrapObservable(config.message);
            $messageContainer.text(message);

            if (ko.isObservable(config.message)) {
                config.message.subscribe(function(msg) {
                    $messageContainer.text(msg);
                })
            }
        }
    }
}