Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/BorisMoore/jsrender/master/jsrender.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
  <script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <input data-bind="value: firstName" type="text" />
  <input data-bind="value: lastName" type="text" />
  <span data-bind="template: 'fullNameTemplate'"></span>
</body>
</html>
<script id="fullNameTemplate" type="text/x-jquery-tmpl">
  {{:firstName}} {{:lastName}}
</script>
​
 
$(document).ready(function() {  
  ko.jsrenderTemplateEngine = function () { };
  ko.jsrenderTemplateEngine.prototype = ko.utils.extend(new ko.templateEngine(), {
    renderTemplateSource: function (templateSource, bindingContext, options) {
      // Precompile the wrapping div for templating
      var precompiled = templateSource['data']('precompiled');
      if (!precompiled) {
        precompiled = $('<div>', { text: templateSource.text() });
        templateSource['data']('precompiled', precompiled);
      }
      // Unwrap observables
      var unwrapped = ko.mapping.toJS(bindingContext.$data);
      // Render and parseHTMLFragment
      return ko.utils.parseHtmlFragment(precompiled.render(unwrapped));
    }
  });
  ko.setTemplateEngine(new ko.jsrenderTemplateEngine());
  var data = { "firstName": "Ian", "lastName": "Davis" };
  var viewModel = ko.mapping.fromJS(data);
  ko.applyBindings(viewModel);
 
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers