javascript - 在模块内的 Knockout.js 视图模型中使用模板

Question

因此，我将旧的 Web 表单应用程序转换为更加模块化，并使用淘汰赛重写了页面。现在我已经完成了所有工作，我想将我的淘汰视图模型导出到一个模块中，但是我遇到了内置模板系统无法渲染模板的问题。

例如

<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

模板的名称需要像这样引用：

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

否则，它会尝试评估messageTemplate为变量以确定要使用的模板名称。