1

我可以看到mustache.js文件已加载（Firebug Net 选项卡中的代码 200），为什么我会收到一条错误消息“ReferenceError: Mustache is not defined”？

我看过几个关于这个主题的相关 SO 帖子，但似乎没有一个能阐明这个问题。任何帮助表示赞赏。

相关 HTML

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

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

应用程序.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();
  });
});

模板.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));
4

2 回答 2

1

templates.js"requires" Mustache，因此您需要在templates.js. 它还需要被定义为一个模块，所以你需要使用它define来正确地创建一个模块。

应用程序.js

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

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

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

模板.js

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

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

});
于 2013-05-16T21:10:41.630 回答
0

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

require( [ 'domReady', 'templates', 'Mustache' ],
    function( domReady, templates, Mustache ) {
        domReady( function () {
            KBCOM.app.init();
        } );
    }
);
于 2013-05-16T21:10:20.163 回答