web-dev-qa-db-fra.com

Utilisation de boucles dans les modèles de backbone / underscore

J'ai un modèle backbone.js/underscore.js que j'alimente dans une vue de backbone pour le rendu. La vue est passée un modèle qui contient un tableau posts d'objets (que j'appelle post dans le modèle).

Problème: Lorsque j'essaie de parcourir tous les éléments du tableau posts, j'obtiens une erreur Uncaught SyntaxError: Unexpected token ) Et renvoie une ligne dans le code template: _.template( $('#tpl_SetView').html() ).

Suis-je en train de faire la boucle de façon incorrecte, ce qui cause cette erreur?

Code modèle

<script type="text/template" id="tpl_SetView">
    <div class="row_4">
        <div class="photo_container">
            <div class="set_cover">
                <img src="/<%= posts[0].thumb_subpath %><%= posts[0].img_filename %>" width=240 />
            </div>
            <div class="set_thumbs">
                <%= _.each(posts, function(post) { %>
                    <img src="<%= post.thumb_subpath %><%= posts.img_filename %>" width=55 />
                <%= }); %>
            </div>
        </div>
    </div>
</script>
javascriptjquerybackbone.jsunderscore.js
26
Nyxynyx

Pour faire écho à une variable, utilisez <%= %>, mais pour analyser le code javaScript, utilisez simplement <% %>.

Par exemple:

// In your Backbone View
var posts = {"posts": this.model.toJSON()};
var template = _.template($("#tpl_SetView").html(), posts);


// In your template
<div class="row_4">
    <div class="photo_container">
        <div class="set_cover">
            <img src="/<%= _.escape(posts[0].thumb_subpath) %><%= _.escape(posts[0].img_filename) %>" width=240 />
        </div>
    <div class="set_thumbs">
        <% _.each(posts, function(post){ %>
            <img src="<%= _.escape(post.thumb_subpath) %><%= _.escape(posts.img_filename) %>" width=55 />
        <% }); %>
        </div>
    </div>
</div>
51
James Woodruff

Je pense que vous constaterez que le problème est dans ces lignes:

<%= _.each(posts, function(post) { %>
    <img src="<%= post.thumb_subpath %><%= posts.img_filename %>" width=55 />
<%= }); %>

D'après mes souvenirs de ce que le soulignement fait pour évaluer les modèles, ces lignes n'ont pas beaucoup de sens. Chaque élément <% = ..%> est évalué séparément .. c'est-à-dire qu'il doit s'agir d'expressions évaluables complètes et non de blocs fonctionnels partiels ..

Edit: En fait, James a raison. <% ..%> peut être défini séparément (tout se résume à une grosse chaîne javascript à la fin). Il est échappé et les expressions interpolées qui doivent être des expressions distinctes.

Edit II: Même ainsi, dans le contexte de l'évaluation, je pense que l'utilisation du bloc fonction créerait peut-être encore une chaîne javascript bizzare qui pourrait ne pas être évaluée comme prévu ... Je devrais y penser. Cela pourrait encore fonctionner parfaitement.

4
JayC