famo.us - Load "on the fly" code with requirejs -
i'm trying create online interactive js programming test-bed. have code window , target iframe code gets loaded execute. wrap code in html , load iframe. problem code want testing loaded via requirejs using data-main parameter. appears code needs loaded separate file can't include in html itself.
what works doesn't me creating file on server use target of data-main parameter , sending html iframe requires requirejs , loads code.
html:
<html> .... <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireconfigtest"></script> .... </html> contents of requireconfigtest.js:
/*globals require*/ require.config({ shim: { }, paths: { famous: 'lib/famous', requirejs: 'lib/requirejs/require', almond: 'lib/almond/almond', 'famous-polyfills': 'lib/famous-polyfills/index' } }); // injection point dynamic code starts define(function (require,exports,module) { var engine = require("famous/core/engine"); var surface = require("famous/core/surface"); var maincontext = engine.createcontext(); var surface = new surface({ size: [100, 100], content: "hello world", classes: ["red-bg"], properties: { textalign: "center", lineheight: "20px" } }); alert('hi'); maincontext.add(surface); }); //this end of dynamic code this requires writing dynamic code server, not reasonable solution. i'm trying implement this...
html:
<html> .... <script type="text/javascript" src="lib/requirejs/require.js"</script> <script type="text/javascript"> /*globals require*/ require.config({ shim: { }, paths: { famous: 'lib/famous', requirejs: 'lib/requirejs/require', almond: 'lib/almond/almond', 'famous-polyfills': 'lib/famous-polyfills/index' } }); // injection point dynamic code starts define(function (require,exports,module) { var engine = require("famous/core/engine"); var surface = require("famous/core/surface"); var maincontext = engine.createcontext(); var surface = new surface({ size: [100, 100], content: "hello world", classes: ["red-bg"], properties: { textalign: "center", lineheight: "20px" } }); alert('hi'); maincontext.add(surface); }); //this end of dynamic code </script> this fails message:
uncaught error: mismatched anonymous define() module: function (require, exports, module) {...
my hope either find way reformat code above in second script tag or find way pass actual contents of requireconfigtest.js via data-main instead of passing name of file load.
any here appreciated.
since not defining module define call, use require:
require(["famous/core/engine", "famous/core/surface"], function (engine, surface) { var maincontext = engine.createcontext(); // etc... you can think of define being require call additionally defines module. way using define defining module not have name because did not give name (which right thing do) not loaded .js file. when don't give name module first argument of define, requirejs assigns name .js file loads module from.
another thing keep in mind require schedules callback execution right away. (the callback not executed right away scheduled execution right away.) whereas define not schedule anything. records callback , when require call (or equivalent) requires it, callback executed.
Comments
Post a Comment