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