Document: createElement

Dynamic JS loading.

by andypotanin

HTML

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

JavaScript

(function() {
      
      var ga = document.createElement('script'); 
      ga.type = 'text/javascript'; 
      ga.async = true;
      ga.src = 'http://ud-cdn.com/js/knockout/2.1/knockout.js';
    
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
      
  })();

setTimeout( function() {

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
 
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};
 
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

    
}, 1000);