Boa tarde galera, como eu faço para acessar um managed bean jsf através de um arquivo externo .js? estou tentando acessar da seguinte forma:

 

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

      $("#botaoCadastroMaterial").click(function(){
       '#{cadastroMaterialController.salvar()}'; 
    });

<!-- end snippet -->

porém nao esta funcionando

abaixo segue meu xhtml:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <?xml version="1.0" encoding="UTF-8"?>
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    	xmlns:ui="http://java.sun.com/jsf/facelets"
    	xmlns:f="http://java.sun.com/jsf/core"
    	xmlns:h="http://java.sun.com/jsf/html" 
    	template="../template/template.xhtml">
    	
    	<ui:define name="corpoPagina">
    		<div id="divCadastroMaterial">
    		<h1 style="width:100%;text-align:center;">Cadastro de Material</h1>
    			<h:form prependId="false" id="formularioCadastroMaterial">
    				<h:outputLabel value="Titulo"/>
    				<h:inputText class="form-control"/>
    				<h:outputLabel value="Categoria"/>
    				<h:inputText class="form-control"/>	
    	            <h:commandButton class="btn btn-primary" value="Cadastrar" id="botaoCadastroMaterial"/>
    			</h:form>				
    		</div>
    	</ui:define>
    	
    </ui:composition>

<!-- end snippet -->