为什么“小胡子”未定义？ （使用RequireJS）

Question

我可以看到mustache.js文件已加载（Firebug“ Net”选项卡中的代码200），为什么为什么会出现错误消息“ ReferenceError：未定义Mustache” ？

我已经看过与该主题相关的几篇SO文章，但似乎都没有发现这个问题。 任何帮助表示赞赏。

相关HTML

<div class="contact"></div>

<script data-main="js/modules/app.js" src="js/lib/require.min.js"></script>

app.js

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.app = {
    data: {
      kboucher: "{ \"firstName\": \"Kevin\", \"lastName\": \"Boucher\", \"dob\": \"1970-05-01T05:00:00.000Z\", \"emailAddress\": \"example@mail.com\", \"telephone\": \"512-555-1212\" }"
    },
    init: function () {
      kbcom.templates.loadTemplate(
        kbcom.templates.vcard,
        JSON.parse(this.data.kboucher),
        document.querySelector('.contact'));
    }
  };
}(KBCOM));
require.config({
  baseUrl: '/js/modules',
  paths: {
    Mustache: '/js/lib/mustache',
    domReady: '/js/lib/domReady'
  }
});
require(['domReady', 'templates', 'Mustache'], function (domReady) {
  domReady(function () {
    KBCOM.app.init();
  });
});

templates.js

var KBCOM = KBCOM || {};
(function (kbcom) {
  kbcom.templates = {
    vcard: '<ul>\
              <li class="fn">{{fisrtName}} {{lastName}}</li>\
              <li class="email">{{emailAddress}}</li>\
              <li class="tel">{{telephone}}</li>\
              <li class="bday">{{dob}}</li>\
            </ul>',
    loadTemplate: function (template, data, element) {
      element.innerHTML = Mustache.render(template, data);
    }
  };
}(KBCOM));

Answer 1

templates.js “需要” Mustache ，因此您需要在templates.js定义该依赖项。 还需要将其定义为模块，因此您需要使用define来正确创建模块。

app.js

require(['domReady', 'templates'], function (domReady, templates) {

  //append templates to namespace
  KBCOM.templates = templates;

  domReady(function () {
    KBCOM.app.init();
  });
});

templates.js

define([    
  //dependencies
  'Mustache'
], function( Mustache ){ 

  //module code
  return {
    vcard: '...',
    loadTemplate: function ( template, data, element ) {
      element.innerHTML = Mustache.render( template, data );
    }
  };

});

Answer 2

Require会将库的变量绑定到第二个参数中给定的函数的参数，因此要在代码中使用模板和Mustache，您应该执行以下操作：

require( [ 'domReady', 'templates', 'Mustache' ],
    function( domReady, templates, Mustache ) {
        domReady( function () {
            KBCOM.app.init();
        } );
    }
);