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>

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));
4

2 に答える 2

1

templates.js"require"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 );
    }
  };

});
于 2013-05-16T21:10:41.630 に答える
0

Require は、ライブラリの変数を 2 番目のパラメーターで指定された関数のパラメーターにバインドするため、コードでテンプレートと Mustache を使用するには、次の手順を実行する必要があります。

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