jQuery selectors for KnockoutJS applyBindings

In the previous blog post, we used the second applyBinding's second parameter. This optional parameter determines which part of the document KnockoutJS will search for data-bind attributes. What you may have noticed is that, I've used the element's id attribute for this.

Fortunately, jQuery selectors can also be used. The trick is that you need to pass only a single element.

HTML code:


<div class="firstView offset2 span8 margin-bottom body">
  <h3>Concatenation!</h3>
  <p>First name: <input data-bind="value: firstName" /></p>
  <p>Last name: <input data-bind="value: lastName" /></p>
  <h4>Hello, <span data-bind="text: fullName"></span>!</h4>
</div>

<div class="secondView offset2 span8 margin-bottom body">
  <h3>Calculation!</h3>
  <p>First value: <input data-bind="value: firstValue" /></p>
  <p>Second value: <input data-bind="value: secondValue" /></p>
  <h4>Hello, <span data-bind="text: calculatedValue"></span>!</h4>
</div>



Javascript code


<script>
function ViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Smith");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}

function calculatedModel() {
    this.firstValue = ko.observable(1);
    this.secondValue = ko.observable(2);
    this.calculatedValue = ko.computed(function() {
        return parseInt(this.firstValue()) + parseInt(this.secondValue());
    }, this);
}

ko.applyBindings(new ViewModel(), $('.firstView')[0]);
ko.applyBindings(new calculatedModel(), $('.secondView')[0]);
</script>



Neat!

 Multiple Models in a View with KnockoutJS

If there's something I have learned working with KnockoutJS, is that you cannot work with two models on the same view. If you do something like this,

<div class="offset2 span8 margin-bottom body">
  <h3>Concatenation!</h3>
  <p>First name: <input data-bind="value: firstName" /></p>
  <p>Last name: <input data-bind="value: lastName" /></p>
  <h4>Hello, <span data-bind="text: fullName"></span>!</h4>
  <h3>Calculation!</h3>
  <p>First value: <input data-bind="value: firstValue" /></p>
  <p>Second value: <input data-bind="value: secondValue" /></p>
  <h4>Hello, <span data-bind="text: calculatedValue"></span>!</h4>
</div>

<script>
function ViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Smith");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}

function calculatedModel() {
    this.firstValue = ko.observable(1);
    this.secondValue = ko.observable(2);
    this.calculatedValue = ko.computed(function() {
        return parseInt(this.firstValue()) + parseInt(this.secondValue());
    }, this);
}

ko.applyBindings(new ViewModel());
ko.applyBindings(new calculatedModel());
</script>



you'd get an error like this:


Error: Unable to parse bindings.
Message: ReferenceError: firstName is not defined;
Bindings value: value: firstName, 



Knockout, of course, would have a workaround for something like this. ko.applyBindings() has a second parameter for us to define which part of the document we want to search data-bind attributes in. Let's apply this to our example.

HTML code:


<div id="firstView" class="offset2 span8 margin-bottom body">
  <h3>Concatenation!</h3>
  <p>First name: <input data-bind="value: firstName" /></p>
  <p>Last name: <input data-bind="value: lastName" /></p>
  <h4>Hello, <span data-bind="text: fullName"></span>!</h4>
</div>

<div id="secondView" class="offset2 span8 margin-bottom body">
  <h3>Calculation!</h3>
  <p>First value: <input data-bind="value: firstValue" /></p>
  <p>Second value: <input data-bind="value: secondValue" /></p>
  <h4>Hello, <span data-bind="text: calculatedValue"></span>!</h4>
</div>



Javascript code


<script>
function ViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Smith");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}

function calculatedModel() {
    this.firstValue = ko.observable(1);
    this.secondValue = ko.observable(2);
    this.calculatedValue = ko.computed(function() {
        return parseInt(this.firstValue()) + parseInt(this.secondValue());
    }, this);
}

ko.applyBindings(new ViewModel(), document.getElementById('firstView'));
ko.applyBindings(new calculatedModel(), document.getElementById('secondView'));
</script>



Check it out a live example!

 Trying out Knockout JS

I have been reviewing Javascript frameworks for a few months now. Javascript Frameworks (aside from Mootools, jQuery, etc) have risen due to the need for Separation of Concerns, Testability, Abstraction and many others.

I never really focused learning any of these javascript frameworks. I have always liked to learn at least one but never had the chance to master one.

At my current company, there has been a rise of clients wanting to have their applications built using some sort of Javascript Frameworks with the likes of BackboneJS, Ember and AngularJS. For me, this was a wake up call to master something other than simple jQuery, Mootools or any low level DOM manipulation library.

I’m not good at comparisons nor am I going to elaborate on any reasons why I chose KnockoutJS. I simply liked how easy it was to develop simple scripts using it.

For now, I have been simply trying out samples and playing with them.

HTML Markup

<div class="offset2 span8 margin-bottom body">
  <h3>Concatenation!</h3>
  <p>First name: <input data-bind="value: firstName" /></p>
  <p>Last name: <input data-bind="value: lastName" /></p>
  <h4>Hello, <span data-bind="text: fullName"></span>!</h4>
  <h3>Calculation!</h3>
  <p>First value: <input data-bind="value: firstValue" /></p>
  <p>Second value: <input data-bind="value: secondValue" /></p>
  <h4>Hello, <span data-bind="text: calculatedValue"></span>!</h4>
</div>

Javscript Code

<script>
function ViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Smith");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

    this.firstValue = ko.observable(1);
    this.secondValue = ko.observable(2);
    this.calculatedValue = ko.computed(function() {
        return parseInt(this.firstValue()) + parseInt(this.secondValue());
    }, this);
}

ko.applyBindings(new ViewModel());
</script>

As you can see, KnockoutJS is quite intuitive. It is easy to understand. This is just one reason I have taken a liking of this wonderful framework.

 Modules and Plugins Galore

If you're like me, you've been doing web development for 9+ years, you've been developing your `own site`, may it be a blog, a simple web portfolio, a gallery, by this time, you're probably getting tired.

I've written my blog site, gallery site and web portfolio more times than I could count. I have written CMSs just as much. A gallery project comes in, you write from scratch, another CMSs comes in your write another. How do I stop this circular madness?

The concept of modules and plugins didn't hit me until a few years ago when developing a gallery project using the Kohana PHP Framework. Jeremy Bush aka zombor developed a gallery as a module that could be put in to any Kohana project. It as interesting since I just dropped the module in my project, added a few styling, some configuration and voila! The gallery was up and running.

This concept just hit me again as I was working on my blog (yes, this one you're reading). I could write modules for almost every functionality. Any new feature, could be a module I could drop, configure and play with.

With that in mind, I have started rewriting it. Funny how the concept was to avoid rewriting and here I am rewriting software. But should I just continue writing it using CakePHP or should I try to write it in another PHP framework?

If you're someone who knows me, you'd guess that I've been writing the project and testing the idea using more than one framework. Yeah, that's right, two projects. In fact one is running a live site right now. One is on my local machine, waiting for the day I'd use it.

The PHP frameworks I have used are CakePHP using Plugins and Yii using Modules. This might be a topic I can write about more in a few days. But for now, wish me luck and focus, so that I may finish these projects. I might even opensource one of them when/if I feel comfortable.

See ya!