knockoutjs in express using ejs

Question

I would like to start using knockoutjs in a web app currently based on Nodejs with express using ejs view engine.

index.ejs

<% layout('layout') -%>
  <!-- Jquery Include-->
  <script src="/js/jquery-2.1.0.min.js"></script>
  <!-- Knockout Javascript Dependency-->
  <script src="/js/knockout-3.0.0.js"></script>
  <script type="text/javascript">
      var viewModel = {
        firstName : "Bert"
      };
      ko.applyBindings(viewModel);   
  </script>

  <p>First Name: <span data-bind="text: firstName"></span></p>

It appears that knockout js is loading properly however, the data-binding is not working I simply see.

First Name:

Is there a compatibility issue loading knockout in an ejs file?

Answer 1

There are no compatibility issues with ejs - as far as I know - however you need to call ko.applyBindings after your DOM is loaded, from the documentation:

To activate Knockout, add the following line to a block:

ko.applyBindings(myViewModel);

You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery’s $ function.

So you need to change your template to move the ko.applyBindings at the end:

<% layout('layout') -%>
  <!-- Jquery Include-->
  <script src="/js/jquery-2.1.0.min.js"></script>
  <!-- Knockout Javascript Dependency-->
  <script src="/js/knockout-3.0.0.js"></script>

  <p>First Name: <span data-bind="text: firstName"></span></p>

  <script type="text/javascript">
      var viewModel = {
        firstName = "Bert"
      };
      ko.applyBindings(viewModel);   
  </script>

Or use the jQuery’s $ function:

<% layout('layout') -%>
  <!-- Jquery Include-->
  <script src="/js/jquery-2.1.0.min.js"></script>
  <!-- Knockout Javascript Dependency-->
  <script src="/js/knockout-3.0.0.js"></script>
  <script type="text/javascript">
      var viewModel = {
        firstName = "Bert"
      };
      $(function() {
          ko.applyBindings(viewModel);  
      }); 
  </script>

  <p>First Name: <span data-bind="text: firstName"></span></p>