Question

So I’m converting an old web forms app to be more modular and I rewrote the page using knockout. Now that I’ve got everything working I wanted to export my knockout viewmodels into a module, but I’m running into an issue with the built in template system not rendering the template.

e.g.

<script type="text/javascript">
  var MyPage = (function($, ko) {
    var my = {};
    my.Message = function(message) {
      var self = this;
      self.messageId = message.messageId;
      self.messageText = message.messageText;
    };
    my.MessageViewModel = function() {
      var self = this;
      self.messageArray = ko.observableArray([]);

      self.getMessageArray = function() {
        $.ajax({
          //get message array
          success: function() {
          //map message array and push new my.Message into messageArray
          }
        });
      };
    };
    return my;
  }) (jQuery, ko);
  $(document).ready(function () {
    ko.applyBindings(new MyPage.MessageViewModel());
  });
</script>

<script type="text/html" id="messageTemplate">
  <tr>
    <td data-bind="text: messageId"></td>
    <td data-bind="text: messageText"></td>
  </tr>
</script>

//exert from html

<table>
  <thead>
    <tr>
      <th>Message Id</th>
      <th>Message Text</th>
    </tr>
  </thead>
  <tbody data-bind="template: {name: 'messageTemplate', foreach: messageArray}">
  </tbody>
</table>

Answer 1

The name of the template needs to be quoted like:

<tbody data-bind="template: {name: 'messageTemplate', foreach: messageArray}">
  </tbody>

Otherwise it tries to evaluate messageTemplate as a variable to determine what template name to use.