2017-03-01 3 views
0

J'ai réussi à faire fonctionner mes modèles Marionette 3 lorsqu'ils sont en ligne. Lorsque j'insère le modèle dans un fichier .html, j'obtiens une erreur NoTemplateError lors du rendu de la vue. J'ai vu des exemples qui utilisent TemplateCache et nécessitent, mais je ne comprends pas pourquoi je ne peux pas simplement inclure le fichier modèle .html dans le corps et le faire fonctionner.Les modèles de Marionette 3 fonctionnent en ligne, mais pas lorsqu'ils sont inclus dans un fichier séparé

Le principal fichier source

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/html"> 

<head> 
    <title>Gmail API Quickstart</title> 
    <meta charset='utf-8' /> 
</head> 

<body> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="underscore_1_8_3.js" type="text/javascript"></script> 
<script src="backbone.js" type="text/javascript"></script> 
<script src="backbone.radio.js" type="text/javascript"></script> 
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script> 
<script src="bootstrap.js" type="text/javascript"></script> 
<link href="bootstrap.css" rel="stylesheet"> 
<link href="mycss.css" rel="stylesheet"> 

<script src="messageDetails.js" type="text/javascript"></script> 

// Ce modèle fonctionne

<script type="x-template/underscore" id="mailItem-template"> 
    <div id="mailItem" class="col-md-12"> 
      <img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/> 
      <input type="checkbox" style="padding: 10;"/> 
    </div> 
</script> 

// Si je commente le modèle ci-dessus et mettre le modèle dans le fichier .html, il ne fonctionne pas la vue. J'ai essayé

<link href="mailItem.tmpl.html" type="text/html"/> 

// J'ai aussi essayé, mais je reçois une erreur de syntaxe

<script src="mailItem.tmpl.html" type="text/javascript"/> 

// Voir qui utilise le modèle

<script src="MessageDetailsView.js" type="text/javascript"></script> 

Répondre

0

En effet, l'utilisation de la balise <script> ne va pas le charger. Essentiellement, si une balise <script> n'est pas javascript, le navigateur la laissera tranquille. C'est pratique car vous pouvez l'utiliser plus tard pour l'utiliser comme modèle, mais le navigateur ne chargera jamais le modèle externe.

Ce que vous pouvez faire est de rendre votre javascript externe.

var myTemplate = _.('My template text'); 

alors vous devriez être en mesure de charger que via une balise Expect myTemplate soit disponible au niveau mondial.

Mais vos meilleures options sont les plus susceptibles d'utiliser un outil de construction comme webpack pour précompiler et importer vos modèles en tant que javascript dans votre script directement.

Plus d'informations: Explanation of <script type = "text/template"> ... </script>