Modelo não carregando em um aplicativo Backbone.js - construído usando o Yeoman - backbone.js, yeoman

Estou usando um modelo .ejs na minha exibição. Mas, por algum motivo, a visualização não carrega o modelo fornecido. Retorna indefinido. Aqui está o código:

sandplate2.applicationView = Backbone.View.extend({
el: "div",

template: _.template($("appl.ejs").html()),

initialize: function(){
console.log("Application view initialize");

_.bindAll(this, "render");

this.render();
},

render: function(){
console.log("Application view rendering");
this.$el.html(this.template());
return this;
}
});

Preciso configurar outra coisa para carregar um modelo?

Estruturei meu aplicativo usando o Yeoman. Eu usei os geradores init e backbone.

FYI - O modelo que estou tentando carregar é carregado no index.html usando um elemento de script.

Respostas:

2 para resposta № 1

Se você o criou usando o Yeoman, dê uma olhada no app.js para ver se você está usando Backbone.LayoutManager. Pode ser necessário alterar a configuração para que o EJS funcione. Por padrão, acho que deveria estar esperando Sublinhado modelos.

Estou a usar Guidão e atualizei meu app.js para ficar assim:

Backbone.LayoutManager.configure({
manage: true,

paths: {
layout: "templates/layouts/",
template: "templates/"
},

fetch: function(path) {
path = path + ".html";

if (!JST[path]) {
$.ajax({ url: app.root + path, async: false }).then(function(contents) {
JST[path] = Handlebars.compile(contents);
});
}

return JST[path];
}
});

Eu também adicionei Handlebars à chamada define () do módulo, passando "Handlebars" como uma referência. Você pode precisar fazer algo semelhante para EJS.

---

0 para resposta № 2

Por favor, tente com o mais recente gerador de espinha dorsal com yeoman 1.0beta. Fizemos muitas melhorias nele, incluindo Modelos ejs pré-compilados. Você não quer se preocupar com os modelos, o yeoman irá pré-compilar e carregá-los para você.

Um exemplo de código gerado para input-view é fornecido abaixo.

Todo.Views.InputView = Backbone.View.extend({

template: JST["app/scripts/templates/input.ejs"],

render: function(){
$(this.el).html(this.template());
}

});

---

0 para resposta № 3

Convenções à parte, parece que o problema é simplesmente sua pesquisa jQuery.

_.template($("appl.ejs")...

$("appl.ejs") não é um seletor DOM válido, a menos que você tenha um elemento como este em seu index.html

<appl class="ejs"></appl>

Se você está tentando direcionar seu modelo com jQuery, dê a ele um ID ou algo que o jQuery possa encontrar como:

<script type="text/template" id="appl">
<div></div><!-- template html here -->
</script>

// later...
$("#appl").html()
// will get your template html

No entanto, como outros mencionaram, em um yeomane no fluxo de trabalho de require.js, você pode pedir ao require.js para buscar o modelo para você como texto e jogá-lo como uma variável antes de criar um modelo de sublinhado.

---