Web Development
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!