从HTML访问system.js中定义的函数

Question

When using system.js, what's the right way to access a function from the global scope? For example, suppose we have this HTML:

<form onsubmit="foo">
<input type="text" name="name" placeholder="name">
</form>
<script src="/lib/system.js"></script>
<script>
SystemJS.import("/src/foo.js");
</script>

And we have this javascript:

function foo(form) { console.log("here"); }

How do you get SystemJS to export foo in such a way that it can be called when the form is submitted?

Answer 1

what about:

<form onsubmit="return foo(this);">
<input type="text" name="name" placeholder="name">
</form>
<script src="/lib/system.js"></script>
<script>
SystemJS.import("/src/foo.js");
</script>

And foo should return true or false in order to signal whether the form should be submitted by the action attribute. As this is missing, I assume false is right here.

Answer 2

I haven't used system.js but a brief look at their docs told me that the import call returns a promise which resolves with the namespace of the module being imported. Perhaps you can try something like:

 <form onsubmit="foo"> <input type="text" name="name" placeholder="name"> </form> <script src="/lib/system.js"></script> <script> SystemJS.import("/src/foo.js") .then(function(foo){ window.foo = foo; }); </script> 

Or, if you want to avoid polluting the global namespace:

 <form id="foo-form"> <input type="text" name="name" placeholder="name"> </form> <script src="/lib/system.js"></script> <script> SystemJS.import("/src/foo.js") .then(function(foo){ document.getElementById('foo-form') .addEventListener('submit', function(ev){ foo(...arguments); ev.preventDefault(); return false; }); }); </script>