加载Markdown时奇怪的Requirejs行为

Question

I have a requirejs module in which I am trying to load markdownjs . Here is the file:

define(function(require) {
  'use strict';

  var Backbone = require('backbone');
  var blogCollectionTemplate = require('hbs!app.templates/blog.collection.view');
  var BlogModelView = require('views/blog.item.view');
  var markdown = require('markdown');

  var BlogCollectionView = Backbone.View.extend({
    template: blogCollectionTemplate,

    initialize: function() {
      debugger;
    },

    render: function() {
      this.$el.html(this.template());
      this.renderAll();
      return this;
    },

    renderAll: function() {
      var that = this;
      this.collection.each(function(blog) {
        that.renderItem(new BlogModelView({model: blog}));
      });
    },

    renderItem: function(blog) {
      this.$el.find('#blog-posts').append(blog.render(blog).el);
    }
  });

  return BlogCollectionView;
});

Here is my require.config :

define(function() {

  require.config({
    hbs : {
      templateExtension : 'hbs',
      disableHelpers: true,
      disableI18n : true
    },

    shim: {
      'backbone': {
        deps: [
          'underscore',
          'jquery'
        ],
        exports: 'Backbone'
      },
      bootstrap: {
        deps: [ 'jquery' ]
      },
      DlHighlight: {
        exports: 'DlHighlight'
      },
      'jqueryMockAjax': {
        exports: '$.mockjax',
        deps: ['jquery']
      },
      json2 : {
        exports: "JSON"
      },
      'underscore': {
        exports: '_'
      }
    },

    paths: {

      backbone: 'libs/backbone/backbone',
      bootstrap: 'libs/bootstrap/dist/js/bootstrap',
      DlHighlight: 'libs/hl/hl-all',
      highlight: 'libs/highlightjs/highlight.pack',
      jquery: 'libs/jquery/jquery',
      jqueryMockAjax: 'libs/jquery-mockjax/jquery.mockjax',
      markdown: 'libs/markdown/lib/markdown',
      text: 'libs/text/text',
      underscore: 'libs/underscore/underscore',

      hbs: 'libs/hbs/hbs',
      handlebars: 'libs/hbs/Handlebars',
      i18nprecompile: 'libs/hbs/hbs/i18nprecompile',
      json2 : 'libs/hbs/hbs/json2',

      'app.templates': '../templates/'
    }
  });
});

Here is the strange behavior. In my initialize , when I hit the debugger, I have access to the markdown object that I have imported, BUT if I have try to use the markdown object, then it is always undefined . If I put markdown in the initialize or in one of the render methods, the markdown variable is undefined . It makes no sense, but is there some behavior that I dont understand about requirejs . Any ideas?

Answer 1

After reading the code of a bower installation of markdown-js, I found that what bower installs won't work with RequireJS as-is. Try adding this shim:

"markdown": {
    exports: "markdown"
}

As to why were you able to get a value for markdown in the debugger without the shim, I believe you were getting it (perhaps without realizing it) from the global scope. Markdown-js installs itself into the global scope ( window.markdown , which is then accessible as markdown if no other variable interferes with it) when it is loaded. This is speculation but it fits the facts.

Answer 2

You can require all of those modules in the define clause itself:

define([
    'backbone',
    'hbs!app.templates/blog.collection.view',
    'views/blog.item.view',
    'markdown'
], function (
    Backbone,
    blogCollectionTemplate,
    BlogModelView,
    markdown
) {
    'use strict';

    // do stuff
});

Also, what do you mean by "If I put markdown in the initialize or in one of the render methods"? Do you mean actually explicitly requiring markdown in initialize and render? Is there any reason to not just load markdown in the define clause as labeled above?

If you are explicitly requiring markdown in initialize or render, I am not sure why that would return undefined , but let me know if moving requirements to the define clause fixes your issue (or if you can't do that). Perhaps you could post the code in the markdown module (if it's not a library that is)?