Chamando métodos em módulos RequireJs de elementos HTML, como manipuladores onclick
Estou mudando um projeto de uma estrutura de módulo de estilo "antigo" para um navegador "novo"ou-server-side-javascript estrutura do módulo comrequire.js.
No cliente estou usando um jQuery hospedado externamente, então eu comecei pelo exemplo que eles dão no"use prioridade config" técnica do README:
<code><title>My Page</title> <script src="scripts/require.js"></script> <script> require({ baseUrl: 'scripts', paths: { jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', jqueryui: ..., ... ... // bunch more paths here }, priority: ['jquery'] }, [ 'main' ]); </script> </code>
Isso está realmente funcionando bem. Mas eu gostaria de exportar a funcionalidade da página principal para a própria HTML. Por exemplo:
<code><a class="button" href="#" onclick="MyApi.foo();"> <img src="foo.png" alt="foo" />Click for: <b>Foo!</b> </a> </code>
Antes de me encaixar no padrão do módulo AMD, expus a funcionalidade de meus vários arquivos criando um objeto de dicionário no espaço global:
<code>// main.js var MyApi = {}; jQuery(document).ready(function($) { // ...unexported code goes here... // export function via MyApi MyApi.foo = function() { alert("Foo!"); }; }); </code>
Mas eu não sei qual é a abordagem correta em require.js. Está tudo bem para colocar no HTML maisrequire
declarações dentro de<script>
tags e, em seguida, nomeiam os módulos para que possam ser usados na página da Web? Ou isso sempre deve ser feito dinamicamente dentro de main.js, como$('#foobutton').click(...)
?