EDIT: Esta resposta é antiga e desatualizada. Eu o excluiria, mas é a resposta "aceita". Vou injetar minha opinião.
Eu não defenderia mais isso. Em vez disso, eu separaria todos os modelos em arquivos HTML individuais. Alguns sugerem o carregamento de forma assíncrona (Require.js ou um tipo de cache de modelo). Isso funciona bem em pequenos projetos, mas em grandes projetos com muitos modelos, você se vê fazendo uma tonelada de pequenas solicitações assíncronas no carregamento da página que eu realmente não gosto. (ugh ... ok, você pode contornar isso com o Require.js pré-compilando suas dependências iniciais com o r.js, mas para os modelos, isso ainda parece errado para mim)
Eu gosto de usar uma tarefa grunt (grunt-contrib-jst) para compilar todos os modelos HTML em um único arquivo templates.js e incluí-lo. Você obtém o melhor de todos os mundos IMO ... modelos em um arquivo, a compilação desses modelos acontece no momento da construção (não em tempo de execução) e você não tem cem solicitações assíncronas minúsculas quando a página é iniciada.
Tudo abaixo é lixo
Para mim, prefiro a simplicidade de incluir um arquivo JS no meu modelo. Portanto, posso criar um arquivo chamado view_template.js que inclua o modelo como uma variável:
app.templates.view = " \
<h3>something code</h3> \
";
Então, é tão simples quanto incluir o arquivo de script como um arquivo normal e usá-lo na sua visão:
template: _.template(app.templates.view)
Indo um passo adiante, na verdade eu uso coffeescript, portanto, meu código se parece mais com isso e evito os caracteres de escape de final de linha:
app.templates.view = '''
<h3>something code</h3>
'''
O uso dessa abordagem evita o surgimento de require.js onde realmente não é necessário.
Aqui está uma solução simples:
Usar "async: false" aqui não é uma maneira ruim, pois, em qualquer caso, você deve esperar até o modelo ser carregado.
Então, a função "render"
[Estou editando a resposta em vez de deixar um comentário porque acredito que isso seja importante.]
se os modelos não estiverem aparecendo no aplicativo nativo , e veja você
HIERARCHY_REQUEST_ERROR: DOM Exception 3
, veja a resposta de Dave Robinson para O que exatamente pode causar um erro "HIERARCHY_REQUEST_ERR: DOM Exception 3"? .Basicamente, você deve adicionar
para a solicitação $ .ajax.
fonte
dataType: 'html'
à nossa solicitação de ajax, apenas no caso?Este mixin permite renderizar modelo externo usando sublinhado de maneira muito simples:
_.templateFromUrl(url, [data], [settings])
. A API do método é quase a mesma que a _.template () do Underscore . Armazenamento em cache incluído.Uso:
fonte
Eu não queria usar o require.js para esta tarefa simples, então usei a solução modificada do koorchik.
Por que anexar modelos ao documento, em vez de armazená-los no objeto javascript? Como na versão de produção, eu gostaria de gerar um arquivo html com todos os modelos já incluídos, portanto não precisarei fazer solicitações adicionais de ajax. E, ao mesmo tempo, não precisarei fazer nenhuma refatoração no meu código, pois uso
nas minhas visualizações Backbone.
fonte
async: false
está obsoleto agoraasync: false
está obsoleto, aprimorei a resposta adicionandocomplete
retorno de chamada.Isso pode ser um pouco fora do tópico, mas você pode usar o Grunt (http://gruntjs.com/) - que é executado no node.js (http://nodejs.org/, disponível para todas as principais plataformas) para executar tarefas no linha de comando. Existem vários plugins para essa ferramenta, como um compilador de modelos, https://npmjs.org/package/grunt-contrib-jst . Consulte a documentação no GitHub, https://github.com/gruntjs/grunt-contrib-jst . (Você também precisará entender como executar o gerenciador de pacotes de nós, https://npmjs.org/ . Não se preocupe, é incrivelmente fácil e versátil.)
Você pode manter todos os seus modelos em arquivos html separados, executar a ferramenta para pré-compilar todos eles usando sublinhado (o que acredito ser uma dependência do plug-in JST, mas não se preocupe, o gerenciador de pacotes do nó instalará automaticamente as dependências para você).
Isso compila todos os seus modelos em um script, digamos
O carregamento do script definirá um global - "JST" por padrão - que é uma matriz de funções e pode ser acessado da seguinte forma:
JST['templates/listView.html']()
o que seria semelhante ao
se você colocar o conteúdo dessa tag de script em (templates /) listView.html
No entanto, o verdadeiro problema é o seguinte: o Grunt vem com esta tarefa chamada 'watch', que basicamente monitora as alterações nos arquivos que você definiu no arquivo grunt.js local (que é basicamente um arquivo de configuração para o seu projeto Grunt, em javascript ) Se você tiver grunhido, inicie esta tarefa para você digitando:
a partir da linha de comando, o Grunt monitorará todas as alterações que você fizer nos arquivos e executará automaticamente todas as tarefas que você configurou nesse arquivo grunt.js se detectar alterações - como a tarefa jst descrita acima. Edite e salve seus arquivos, e todos os seus modelos serão recompilados em um arquivo js, mesmo se estiverem espalhados por vários diretórios e subdiretórios.
Tarefas semelhantes podem ser configuradas para aprender a usar javascript, executar testes, concatenar e minificar / modificar os arquivos de script. E tudo pode ser vinculado à tarefa de observação, para que as alterações em seus arquivos disparem automaticamente uma nova 'compilação' do seu projeto.
Demora algum tempo para definir as coisas e entender como configurar o arquivo grunt.js, mas vale a pena o tempo investido e acho que você nunca voltará a uma maneira de trabalhar antes do trabalho
fonte
template: JST['test.html']()
:, não parece estar carregando os dados do JST :( (veja minha pergunta aqui: stackoverflow.com/questions/29723392/… )Eu acho que é isso que pode ajudá-lo. Tudo na solução gira em torno da
require.js
biblioteca, que é um carregador de arquivos e módulos JavaScript.O tutorial no link acima mostra muito bem como um projeto de backbone pode ser organizado. Uma implementação de amostra também é fornecida. Espero que isto ajude.
fonte
Fiquei interessado no modelo de javascript e agora estou dando os primeiros passos com o backbone. Isso é o que eu criei e parece funcionar muito bem.
fonte
get
função, eu provavelmente retornaria o$.ajax
próprio objeto para que ele retornasse um objeto de promessa, para o caso de seu modelo não responder imediatamente.Eu tive que definir o tipo de dados como "texto" para fazê-lo funcionar para mim:
fonte
Encontrei uma solução que funciona para mim usando o jQuery.
Eu adiciono o código do modelo de sublinhado, com o método jQuery.load (), ao arquivo html principal.
Uma vez lá, estou usando-o para gerar os modelos. Tudo precisa acontecer de forma síncrona!
O conceito é:
Eu tenho um código de modelo de mapa sublinhado:
E eu coloquei esse código em um arquivo chamado map-template.html
Depois disso, crio um wrapper para os arquivos de modelo.
Então eu incluo esse arquivo no meu arquivo html principal assim.
Na cabeça:
Felicidades.
fonte
Eu sei que essa pergunta é realmente antiga, mas surgiu como o primeiro resultado em uma pesquisa no Google por modelos de sublinhado ajax.
Eu estava cansado de não encontrar uma boa solução para isso, então criei a minha:
https://github.com/ziad-saab/underscore-async-templates
Além de carregar modelos de sublinhado usando AJAX, ele adiciona a funcionalidade <% include%>. Espero que possa ser útil para alguém.
fonte
Eu estava um pouco desconfortável ao forçar o jQuery a funcionar de forma síncrona, então modifiquei o exemplo síncrono anterior usando promessas. É praticamente o mesmo, mas é executado de forma assíncrona. Estou usando modelos hbs neste exemplo:
Então, para usar o html renderizado:
NOTA: Conforme discutido por outras pessoas, seria preferível compilar todos os modelos em um único arquivo templates.js e carregá-lo no início, em vez de ter muitas chamadas AJAX síncronas pequenas para obter modelos quando a página da web é carregada.
fonte
Avançar aviso - Aqui estão os dragões:
Menciono a abordagem mostrada abaixo simplesmente para ajudar aqueles que lutam para fazer com que as pilhas do ASP.NET (e estruturas semelhantes) funcionem harmoniosamente com o ecossistema de js-libs. Escusado será dizer que esta não é uma solução genérica. Tendo dito isto ...
/ endforwardwarning
Se você estiver usando o ASP.NET, poderá exteriorizar seus modelos simplesmente colocando-os em uma ou mais visualizações parciais próprias. Também dentro do seu .cshtml:
Dentro do seu template.cshtml:
E agora você pode usar o modelo como de costume:
Espero que essa abordagem ilusoriamente óbvia ajude alguém a economizar uma hora em coçar a cabeça.
fonte