Durandal JS – modelos de pré-carregamento

Eu uso o Durandal JS há um tempo e acho que é um framework fantástico.

No entanto, falta a opção de pré-carregar modelos para renderização de visualização rápida. Provavelmente porque Durandal está usando o plugin de texto RequireJs para o carregamento do template.

Então eu modifiquei o text.js

Baixe o exemplo aqui

A mudança foi surpreendentemente simples e sem quebrar o ciclo de vida de amarração da Durandal.

Um exemplo de pré-carregamento do modelo de shell no index.html

<script type="text/html" data-view-path="app/views/shell.html"> 
... template content...
</script>

Text.js irá agora verificar se o modelo de solicitação está presente na página, caso contrário, fará a chamada ajax.

O atributo “data-view-path” define como o mesmo caminho de solicitação do modelo.

text.js é o módulo AMD, o que significa que está protegido no módulo retornado. Então, eu não posso fazer uma mágica AOP para modificar dinamicamente o módulo.

Portanto, aqui estão as alterações no arquivo text.js. Sim, a mudança requer jQuery.

1. Add

    var  $textHtml = []; // for cache all text/html elemets

2. add

    $(document).ready(function() {
        $textHtml = $("[type='text/html']");
    });

3. updated text.get (around line 263)

var dataTmp = ($textHtml.length) ? $textHtml.filter("[data-view-path='"+ url +"']").eq(0) : [],
       xhr,
   header;

    if (dataTmp.length) {
          return callback(dataTmp.html());
    }
        ....

Agora, os principais benefícios são
– Reduzir a quantidade de chamadas ajax
– Aproveitar a vinculação de dados da linguagem do lado do servidor. No meu caso, posso usar .Net MVC parcial com os dados do modelo no modelo.