Backbone下划线模板,如何呈现每个子元素

时间:2013-06-21 08:44:43

标签: json backbone.js for-loop underscore.js

您好,我目前正在学习Backbone并且已经陷入困境。

基本上我正在阅读以下JSON文件的内容并渲染到Underscore模板。我能够将参数发送到我的模板并使用以下代码进行渲染:

var template = _.template( movieView, movInfo);
                this.$el.html( template );

我模板中的摘录(不是完整模板):

<section>
        <p><%= movie_symptonis %></p>
    </section>

JSON的一个例子:

[{
            "id": "0",
            "name": "Some movie",
            "date": "2013",
            "time" : "83 MIN",
            "rating" : "CERT/ U",
            "status" : "AVAILABLE NOW",
            "symptonis" : "blah blah blah",
            "galleryImages" : {
                "image" : "one.png",
                "image" : "two.png",
                "image" : "three.png"
            }
        }]

我现在需要为图库中的每个图像渲染一些html,我熟悉每个方法的下划线(_.each)。但是我不确定这一切是如何协同工作的,任何帮助或推动正确的方向都会很棒。

提前致谢

1 个答案:

答案 0 :(得分:2)

您可以在模板内使用_.each方法。它看起来像下面这样。

<section>
    <p><%= movie_symptonis %></p>
    <% _.each(galleryImages, function(galleryImage){ %>
         <img src="<%= this[galleryImage] %>" />
    <% }) %>
</section>

“galleryImages”变量可从您传递给模板的json中获得。

&lt; %%&gt;分隔符将像普通的javascript一样执行代码。

您可以使用模板中javascript中可用的所有构造

(例如)

<div>
  <% if(condition) { %>
   ... success html ...
  <% } else { %>
    ... failure html ..
  <% } %> 
</div>

您可以在模板中了解有关使用构造的更多信息。但是在模板中引入太多逻辑并不是一个好主意。但它有助于放置简单的视图逻辑。

希望对你有所帮助。