Skip to content

Instantly share code, notes, and snippets.

@jonschlinkert

jonschlinkert/javascript-developer-needed.md

Forked from doowb/gist:4064157
Created November 15, 2012 19:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jonschlinkert/4080808 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jonschlinkert/4080808 to your computer and use it in GitHub Desktop.
Download ZIP
Client Side Javascript Developer
Raw
gistfile1.md

Looking for a client side javascript developer that 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.

Example:

<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);

Hopefully, this will turn into a longer relationship building out the front end of our application. The required skills below refer to mostly client side development, while the desired skills are used on the server side, so they would be helpful.

Required Skills:

  • Javascript
  • Knockout.js
  • Underscore.js
  • Git
  • Github

Desired Skills:

  • ASP.NET MVC
  • C#
  • Visual Studio 2012
  • Windows Azure
@panna-ahmed
Copy link

panna-ahmed commented Nov 21, 2012

I am very much interested in working with you.

@rageshkrishna
Copy link

rageshkrishna commented Nov 21, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment